react-native-gifted-chat视频消息不显示-Video not by GiftedChat implemented

Question

消息中未显示视频。收到消息“视频不是GiftedChat实现的，您需要通过renderMessageVideo prop提供自己的实现。

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,
}}
/>

请帮帮我，我哪里做错了？

​

Answer 1

这是什么意思，您需要提供自定义组件来包装视频

在您的示例中，您将消息直接呈现给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,
}}
/>