时间戳

首页 > 解决方案 > react-native-gifted-chat 视频消息未显示 - GiftedChat 未实现视频

react-native-gifted-chat - react-native-gifted-chat 视频消息未显示 - GiftedChat 未实现视频

问题描述

消息中未显示视频。收到消息“视频不是由 GiftedChat 实现的。您需要使用 renderMessageVideo 属性提供自己的实现。

Message[] has the following values:
_id:
text: 
createdAt:
user:{
       _id:
       name:
       avatar:
     },
     image: 
     video:


<GiftedChat
messages={this.state.messages}
onSend={this.onSend.bind(this)}
user={{
_id: this.state.LoggedinuserID,
}}
/>

请帮助我做错了什么 在此处输入图像描述

标签： react-native-gifted-chat

解决方案

您需要提供自定义组件以将视频包装到其中

在您的情况下，您将消息直接呈现给 GiftedChat，因此我们会将自定义视频组件传递给 GiftedChat，如下所示

参考：https ://github.com/FaridSafi/react-native-gifted-chat/#react-native-video-and-expo-av

import { Video,Audio } from 'expo-av';

   const renderMessageVideo = (props: any) => {
     const { currentMessage } = props;
     return (
       <View style={{ padding: 20 }}>
          <Video
           resizeMode="contain"
           useNativeControls
           shouldPlay={false}
           source={{ uri: currentMessage.video }}
           style={styles.video}
         />
       </View>
     );
   };


<GiftedChat
messages={this.state.messages}
onSend={this.onSend.bind(this)}
renderMessageVideo={renderMessageVideo}
user={{
_id: this.state.LoggedinuserID,
}}
/>

推荐阅读