React Native Gifted Chat 项目教程
react-native-gifted-chat项目地址:https://gitcode.com/gh_mirrors/rea/react-native-gifted-chat
1. 项目的目录结构及介绍
React Native Gifted Chat 项目的目录结构如下:
react-native-gifted-chat/
├── example/
│ ├── App.js
│ ├── index.js
│ └── ...
├── src/
│ ├── Actions.js
│ ├── GiftedChat.js
│ ├── Message.js
│ ├── MessageContainer.js
│ ├── ...
│ └── index.js
├── .gitignore
├── .npmignore
├── README.md
├── package.json
└── ...
目录结构介绍
- example/: 包含项目的示例代码,展示了如何使用 React Native Gifted Chat 组件。
- App.js: 示例应用的主文件。
- index.js: 示例应用的入口文件。
- src/: 包含项目的源代码。
- Actions.js: 定义了一些聊天操作的函数。
- GiftedChat.js: 核心组件,提供了聊天界面的主要功能。
- Message.js: 消息组件,用于显示单条消息。
- MessageContainer.js: 消息容器组件,用于管理消息列表。
- index.js: 导出所有组件的入口文件。
- .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
- .npmignore: 指定 npm 包发布时忽略的文件和目录。
- README.md: 项目的说明文档。
- package.json: 项目的配置文件,包含依赖项、脚本等信息。
2. 项目的启动文件介绍
项目的启动文件位于 example/
目录下:
- index.js: 示例应用的入口文件,负责启动应用。
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
- App.js: 示例应用的主文件,包含了 React Native Gifted Chat 组件的使用示例。
import React, { useState, useCallback } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
const App = () => {
const [messages, setMessages] = useState([]);
const onSend = useCallback((newMessages = []) => {
setMessages(previousMessages => GiftedChat.append(previousMessages, newMessages));
}, []);
return (
<GiftedChat
messages={messages}
onSend={newMessages => onSend(newMessages)}
user={{
_id: 1,
}}
/>
);
};
export default App;
3. 项目的配置文件介绍
项目的配置文件主要包括 package.json
和 README.md
。
package.json
package.json
文件包含了项目的依赖项、脚本等信息。
{
"name": "react-native-gifted-chat",
"version": "0.16.3",
"description": "💬 The most complete chat UI for React Native",
"main": "src/index.js",
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"prop-types": "^15.7.2",
"react-native-communications": "^2.2.1",
"react-native-parsed-text": "^0.0.21",
"shallowequal": "^1.1.0"
},
"devDependencies": {
"babel-jest": "^26.0.1",
"eslint": "^7.0.0",
"jest": "^26.0.1",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
README.md
README.md
文件是项目的说明文档,包含了项目的安装、使用方法等信息。
# React Native Gift
react-native-gifted-chat项目地址:https://gitcode.com/gh_mirrors/rea/react-native-gifted-chat