简介
meteor-redux-react-native-gifted-chat 是一个基于 Meteor、Redux、React Native 和 Gifted Chat 的 npm 包，用于构建移动端实时聊天应用。其中：
- Meteor 是一个面向实时 Web 应用开发的极简全栈框架。
- Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
- React Native 是使用 React 构建原生移动应用的框架。
- Gifted Chat 是 React Native 中最流行的聊天 UI 组件之一。
本文旨在介绍如何使用 meteor-redux-react-native-gifted-chat 构建一个实时聊天应用。
安装
首先，确保已经安装了 Node.js 和 npm。然后，在命令行中运行以下命令：
npm install meteor-redux-react-native-gifted-chat --save
同时，需要在 app 项目中安装以下依赖项：
npm install react-native-meteor --save npm install redux react-redux redux-thunk --save
使用
1. 创建 Meteor 服务器
在在项目根目录下创建一个名为 /server/main.js 的文件，并在其中写入以下代码：
import { Meteor } from 'meteor/meteor';
Meteor.startup(() => {
// Your code here
});在其中添加初始化聊天应用时所需的 MongoDB 集合和发布分配。例如：
-- -------------------- ---- -------
------ - ------ - ---- ----------------
------ - --------- - ---- -----------------------
------ - -------- - ---- -------------------------
----------------- -- -
------------------------ ---------------------- - ---
----------------------- ----------- - ---
--------------------------- -------- -- -
------ ---------------- ---------------------- ----------- ---
---
-------------------------- -------- -------- ------ -
------------- --------
------------ ---------------------
------ --------------- ----------- ------ -- - ------ ----- -- --- ----- - ------- -- - ---
---
---2. 设置 Meteor.match 访问路径
在 app 项目中的任意一个 React 组件中初始化 meteor-redux-react-native-gifted-chat 所需的 Meteor 数据库。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- - ----------- - ---- ----------------------
----- ---- - -- ------ -- -- -
------------ -- -
--------------------------------------- - ---------- ---- ---
----- ------ - ------------------------------
------ -- -- --------------
-- ----
------ ---------------- ---- -----------------
--
------ ------- -------------- -- -
------ -
------- ----------------
--
---------接着，创建一个 Screen 组件，并在其中使用 meteor-redux-react-native-gifted-chat 提供的 Chat 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ - -------- - ---- --------------
------ - ------------ ---------------- ------- - ---- --------
------ --------------- ---- --------------
------ -------------------- ---- -------------------
------ ----------- ---- --------------
------ - ---- - ---- ----------------------------------------
----- ----------- - ------------------
----- --------- - ---
----- ------------- - -
---- -------
-------- -------------
--
----- ---------------------------- - ------------------------------------
------------------------------------------------
---------------------------------------------
----- ----------------- - ----------------------
----- ----- - ------------------------ ---------- -------------------
----- ---------- - -- -- -
--------- --------------
----- -------------------------
----- --
-------
-----------
--
----- ------ - -------------------
---------- -
----- --
---------- ---
--
---
------ ------- -----------在 ChatScreen 组件中，通过 Provider 组件将 Redux store 注入进 Chat 组件中，从而使得 Chat 组件拥有 dispatch 行为的能力。
3. 构建 UI
由于 meteor-redux-react-native-gifted-chat 基于 Gifted Chat，因此，需要基于 Gifted Chat 提供的 API 创建聊天应用 UI。在这里，为了说明问题，简要地提及 Gifted Chat 的 UI 构建方式。具体方法请参考 Gifted Chat 文档。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ---------------------------
----- ---- ------- --------------- -
----- - -
--------- ---
--
------------------- -
----- ----------- - -
-
---- --
----- ------ -----------
---------- --- -------
----- -
---- --
----- ------ --------
------- -----------------------------------
--
--
-- ---- --------
--
---------------- -- --
--------- ------------
----
-
--------------- - --- -
--------------------------- -- --
--------- ----------------------------------------- ----------
----
-
-------- -
------ -
-----------
------------------------------
---------------- -- ----------------------
-------
---- --
--
--
--
-
-
------ ------- -----以上代码中创建出了一个基础的 Chat 类。在 componentDidMount 生命周期函数中，初始化了一个拥有三条消息内容的聊天记录。在 onSend 函数中，根据 Gifted Chat 的 API，可以将新消息加入到已有消息队列中。
熟悉 Gifted Chat 的 UI 构建后，可以开始使用 meteor-redux-react-native-gifted-chat。更新 Chat 组件，使其与 meteor-redux-react-native-gifted-chat 集成：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- - ----------- - ---- ----------------------
------ - ---------- - ---- ---------------------------
------ - ------- - ---- --------------
------ - ----------- - ---- ------------
----- ---- - -- ------- ----------- --------- ------------ -------------- -- -- -
------------ -- -
--------------------------------------- - ---------- ---- ---
----- ------ - ---------------------------- ------------
------ -- -- --------------
-- ----
------------ -- -
-- ---------------- - -- -
--------------------------------
-
-- ------------
------ -
-----------
-------------------
--------------------
-------
---- -------
--
--
--
--
----- --------- - ---------- ---- -- -- --
--------- --------------
----
----- ------- - ---------------------- - ---------- -- -- --
------------ -------- -- ------------------------------------- ------------------
--------------- ------------- -- ---------------------------------------- ---------------
----
------ ------- ------------------------ -- -
------ -
------- ----------------
--
-------------------在 Chat 组件中，调用 meteor-redux-react-native-gifted-chat 提供的 Redux actions，从而实现了聊天记录的发布、消息的发送和阅读状态的变更。
总结
本文介绍了如何使用 meteor-redux-react-native-gifted-chat 构建一个实时聊天应用。涉及到了 Meteor、Redux、React Native 和 Gifted Chat 等技术。同时，也展示了如何使用 npm 包来扩展引入到自己项目中的依赖库，以及如何通过与第三方库的集成来构建 Web 应用。这些知识点对于前端开发者来说非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f421d8e776d08040e01