介绍
React Native 是一个很火的移动端框架，而 react-native-gifted-chat-video-support 则是基于 React Native 实现的一款聊天界面库，可以支持一些常见的聊天功能，例如文本消息、图片消息、语音消息等。最近，这个库又新增了一项支持，即视频消息的交互。
安装
你可以通过 npm 包管理器来安装 react-native-gifted-chat-video-support。在终端中输入如下命令：
--- ------- -------------------------------------- ------
使用
安装完成后，我们需要先为视频消息添加一个视图，这可以通过自定义消息的方式来实现：
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - ------------ - ---- -----------------------------------------
----- ----------- - ------- -- -
------
------------- ---------- --
-------------------------------------------------
-------
--
------ ------- ------------如上，CustomVideo 组件是自定义的视频消息组件，它通过 "message" 字段来获取当前消息对象，并在视频播放画面下添加了一行文字。
接下来，我们需要在 GiftedChat 组件中使用 CustomVideo 组件，以支持视频消息交互：
------ ----- ---- --------
------ - ---------- - ---- ---------------------------
------ ----------- ---- ----------------
----- -------- - -
-
---- --
----- ------ -----------
---------- --- -------
----- -
---- --
----- ------ --------
------- -----------------------------------
--
--
-
---- --
------ -
-------- ---------------------------------------------
---- ---------------------------------------------
------- -----
------ -----
--------- ---
----- ---
--
---------- --- -------
----- -
---- --
----- ------ --------
------- -----------------------------------
--
--
--
----- ------- ------- --------------- -
----- - -
--------- ---
--
-------------------- -
---------------
---------
---
-
--------------- - --- -
--------------------------- -- --
--------- ----------------------------------------- ----------
----
-
-------- -
------ -
-----------
------------------------------
------------------------- -- ------------ ---------- ---
---------------- -- ----------------------
-------
---- --
--
--
--
-
-
------ ------- --------如上，我们首先将 messages 存入 state 中，然后在 GiftedChat 中，将 CustomVideo 作为 renderMessageVideo 的 props，即自定义视频消息的展示方式。
最后，在支持发送视频消息的 Event 中加入视频支持：
------ ----- ---- --------
------ - ---- - ---- ---------------------
----- ------------- - ----- -- -
--------
----------
----------
------ ---------- -- -- -
------------
--
------ -------- -- -- -
------------
--
------- -- -- ---
--
-------- -- -
----- ----------------------- --------------------------
----- ------------------------ -----------------------------------
-------
--
--------------------------------------
----------------------------------------
--
--
----- --------- - ----- -- -- -
--- ------ - ----- -------------------------------------
----------- ------------------------------------
------------------ ------------------------------------------
---
-- ------------------- -
--- ---- - -
------ -
---- -----------
----- ------------
--------- ----------------
------ -------------
------- --------------
--
--
---------- --------
-
--接下来，毫无问题会显示发送的视频文件。
总结
以上就是关于 npm 包 react-native-gifted-chat-video-support 的使用方法和注意点。虽然使用这个库对 React Native 开发者来说不是非常基础，但是通过学习这个库的同时还能够了解到 React Native 增强 vue，熟练掌握这项技能可真正发挥它所带来的价值。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668ead9381d61a3540c06