在 React Native 开发中，我们经常需要使用聊天输入框这类交互组件，而 chatinput-react-native 就是一个非常优秀的 npm 包，可以方便地快速集成到我们的应用中。
安装
在项目根目录下执行以下命令安装 chatinput-react-native：
npm install --save chatinput-react-native
使用
在需要使用聊天输入框的地方引入组件：
import ChatInput from 'chatinput-react-native';
接下来我们可以定义一个 state，用来存储输入框内的内容：
-- -------------------- ---- -------
----- ---------- ------- --------- -
----- - -
----- ---
--
-------- -
------ -
----- -------------------------
---------- ----------------------- -------------- -- --------------- ---- --- --
-------
--
-
-这个时候我们就已经成功地集成了 chatinput-react-native 组件，可以在应用中使用了。
进一步定制
除了基本的输入框外，chatinput-react-native 还提供了许多可定制的属性。
风格
我们可以通过 style 属性来定制输入框的风格，比如修改字体大小、背景、字体颜色等：
-- -------------------- ---- -------
----------
--------
--------- ---
---------------- -------
------ -------
--
-----------------------
-------------- -- --------------- ---- ---
--按钮
我们可以通过传入一个自定义的按钮组件来修改发送按钮：
<ChatInput
sendButton={<CustomButton />}
value={this.state.text}
onChange={text => this.setState({ text })}
/>点击事件
我们可以监听用户对按钮的点击操作和输入框内容的变化操作：
<ChatInput
onSubmitEditing={() => this.submitMessage()}
onChangeText={text => this.setState({ text })}
value={this.state.text}
/>示例代码
最后，我们给出一个完整的聊天输入框实现的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---------- ----------------- ---- - ---- ---------------
------ --------- ---- -------------------------
----- ---------- ------- --------- -
----- - -
----- ---
--
--------------- -
----- - ---- - - -----------
-------------------- ------
--------------- ----- -- ---
-
-------- -
------ -
----- -------------------------
----------
--------------------
------------
----------------- ----------- -- ----------------------
----- -----------------------------
-------------------
-
------------------ -- --------------- ---- ---
-----------------------
------------------- -- ---------------------
--
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
------ -
---------------- -------
------------- --
------ ------
------- ---
------------------ ---
--
----- -
------ ----------
--------- ---
----------- -------
--
---
------ ------- -----------细心的读者可以发现，这个示例代码中单独引入了 React Native 的一些组件，这是为了方便示例展示而做出的调整，实际使用时可以如前文例子中一样只引入 chatinput-react-native 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ac881e8991b448d8610