简介
@sherwinw/react-native-gifted-chat 是一款 React Native 的聊天组件库。它提供了一个易于使用的界面来快速构建聊天界面。
在这篇教程中，我们将学习如何使用@sherwinw/react-native-gifted-chat在 React Native 应用程序中创建聊天界面。
安装
安装@sherwinw/react-native-gifted-chat可以使用npm或yarn。
使用npm：
npm install @sherwinw/react-native-gifted-chat
使用yarn：
yarn add @sherwinw/react-native-gifted-chat
使用
首先，让我们创建一个新的 React Native 应用程序:
npx react-native init ChatApp
在 App.js 中导入为我们准备的组件，并使用以下代码来创建一个最小可行的样例:
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- --------------------- ------------ - ---- ---------------
------ - ---------- - ---- -------------------------------------
------ ------- -------- ----- -
----- ---------- ------------ - -------------
-------- ------------------ -
--------------------------------------- -------------
-
------ -
------------- -------- ----- -- ---------------- ------ ---
-----------
-------------------
-------------------- -- -------------------
------- ---- - --
-
------------ --- --------- -- --------------------- ------------------ ---
-------------
---------------
--
-运行应用程序并观察结果，我们已经创建了一个基本的聊天界面。
属性
@sherwinw/react-native-gifted-chat有很多属性，让我们了解其中一些:
messages
这是聊天历史记录对象数组。它应该在组件的初始状态中初始化为空数组，并随着新消息的添加进行更新。
onSend
每当用户点击发送消息按钮时，该方法将被调用。它负责将新消息添加到聊天记录中。
user
使用者是一个对象，它保存有用户信息，包括用户的唯一ID、用户名等等。
listViewProps
在聊天界面组件中，您可以通过传递 listviewProps 属性来自定义聊天消息列表的样式。这个属性应该是一个对象。
例如，您可以使用 listviewProps 来定义聊天消息列表的背景颜色:
<GiftedChat
messages={messages}
onSend={(newMessage) => onSend(newMessage)}
user={{ _id: 1 }}
listViewProps={{
style: { backgroundColor: '#f5f5f5' },
}}
/>renderBubble
使用 renderBubble 属性来自定义聊天气泡的渲染方式。
以这个示例为例，让我们使消息气泡从右边开始，以第一个参数为起点:
-- -------------------- ---- -------
-----------
-------------------
-------------------- -- -------------------
------- ---- - --
--------------------- -- -
-------
----------
---------------
------ -
---------------- ---------
-
--
--
--
--renderSend
使用 renderSend 属性在消息输入框顶部渲染自定义发送按钮。
举个例子，让我们来将发送按钮换成一个自定义的图标:
-- -------------------- ---- -------
-----------
-------------------
-------------------- -- -------------------
------- ---- - --
----------------- -- -
----- -----------
------ ------------------------------ --
-------
--
--结论
我们已经成功地使用@sherwinw/react-native-gifted-chat在 React Native 应用程序中创建了聊天界面。本教程的代码片段向您展示了如何使用该库的一些主要属性。
更多关于该库的内容，请阅读源代码或官方文档。相信在使用这个组件库的时候，你们也能够成功构建出出色的聊天界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e085a