React Native Gifted Chat 项目教程

React Native Gifted Chat 项目教程

react-native-gifted-chat💬 The most complete chat UI for React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-gifted-chat

1、项目的目录结构及介绍

React Native Gifted Chat 项目的目录结构如下：

react-native-gifted-chat/
├── src/
│   ├── Actions.tsx
│   ├── Avatar.tsx
│   ├── Bubble.tsx
│   ├── Chat.tsx
│   ├── Composer.tsx
│   ├── Day.tsx
│   ├── GiftedChat.tsx
│   ├── GiftedChatContext.tsx
│   ├── InputToolbar.tsx
│   ├── LoadEarlier.tsx
│   ├── Message.tsx
│   ├── MessageContainer.tsx
│   ├── MessageImage.tsx
│   ├── MessageText.tsx
│   ├── Send.tsx
│   ├── SystemMessage.tsx
│   ├── Time.tsx
│   ├── TypingIndicator.tsx
│   ├── utils/
│   └── index.tsx
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
└── tsconfig.json

目录结构介绍

• src/：包含项目的所有源代码文件。
  • Actions.tsx：定义消息操作组件。
  • Avatar.tsx：定义用户头像组件。
  • Bubble.tsx：定义消息气泡组件。
  • Chat.tsx：定义聊天界面组件。
  • Composer.tsx：定义消息输入框组件。
  • Day.tsx：定义日期分隔组件。
  • GiftedChat.tsx：主聊天组件。
  • GiftedChatContext.tsx：上下文组件。
  • InputToolbar.tsx：定义输入工具栏组件。
  • LoadEarlier.tsx：定义加载更早消息的组件。
  • Message.tsx：定义消息组件。
  • MessageContainer.tsx：定义消息容器组件。
  • MessageImage.tsx：定义消息图片组件。
  • MessageText.tsx：定义消息文本组件。
  • Send.tsx：定义发送按钮组件。
  • SystemMessage.tsx：定义系统消息组件。
  • Time.tsx：定义时间显示组件。
  • TypingIndicator.tsx：定义正在输入指示器组件。
  • utils/：包含一些工具函数。
  • index.tsx：入口文件。
• .gitignore：Git忽略文件配置。
• .npmignore：NPM忽略文件配置。
• .prettierrc：Prettier代码格式化配置。
• .travis.yml：Travis CI配置文件。
• LICENSE：项目许可证。
• README.md：项目说明文档。
• package.json：项目依赖和脚本配置。
• tsconfig.json：TypeScript配置文件。

2、项目的启动文件介绍

项目的启动文件是 src/index.tsx，它是整个项目的入口文件。该文件导入了 GiftedChat 组件并提供了默认导出。

import GiftedChat from './GiftedChat';

export {
  Actions,
  Avatar,
  Bubble,
  Chat,
  Composer,
  Day,
  GiftedChat,
  GiftedChatContext,
  InputToolbar,
  LoadEarlier,
  Message,
  MessageContainer,
  MessageImage,
  MessageText,
  Send,
  SystemMessage,
  Time,
  TypingIndicator,
  utils,
} from './';

export default GiftedChat;

3、项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "react-native-gifted-chat",
  "version": "2.4.0",
  "description": "The most complete chat UI for React Native",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {
    "build": "tsc",
    "lint": "eslint src --ext .

react-native-gifted-chat💬 The most complete chat UI for React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-gifted-chat