介绍
React Native 是一个很火的移动端框架，而 react-native-gifted-chat-video-support 则是基于 React Native 实现的一款聊天界面库，可以支持一些常见的聊天功能，例如文本消息、图片消息、语音消息等。最近，这个库又新增了一项支持，即视频消息的交互。
安装
你可以通过 npm 包管理器来安装 react-native-gifted-chat-video-support。在终端中输入如下命令：
npm install react-native-gifted-chat-video-support --save
使用
安装完成后，我们需要先为视频消息添加一个视图，这可以通过自定义消息的方式来实现：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- ---- - ---- --------------- ------ - ------------ - ---- ----------------------------------------- ----- ----------- - ------- -- - ------ ------------- ---------- -- ------------------------------------------------- ------- -- ------ ------- ------------展开代码
如上，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
