0

任何人都可以通过反应原生天才聊天来帮助我吗？我正在制作一个成熟的聊天应用程序，具有文本、图像、视频、文档等所有功能。默认情况下，我可以使用文本和图像进行聊天。谁能帮我解决视频实现的代码片段？我需要在Press Video Message 上显示一个视频播放器。

https://github.com/FaridSafi/react-native-gifted-chat

有一些可以使用的自定义道具，但我被卡住了，如果我能在聊天中运行视频，我将不胜感激。

我已经尝试了几乎所有关于视频的道具：
1. renderBubble={this.renderBubble}
2. renderMessage={this.renderMessage}
3.renderCustomView={this.renderCustomView}

这是显示视频的以下代码（自动播放然后停止，没有视频按钮覆盖）：

this.setState({
messages: [
{
_id: 3,
video: 'https://www.w3schools.com/html/mov_bbb.mp4',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://placeimg.com/140/140/any'
}
]
});

<GiftedChat
messages={this.state.messages}
user={{
_id: userId
}}
renderActions={!socialize && this.renderActions}
onSend={this.sendMsesage}
onInputTextChanged={this.onChangeText}
text={this.state.message}
/>

当我按下视频消息时，消息应该在可以是灯箱或 react-native-video 的视频播放器中打开。

4

2 回答 2

0

从 0.11.0 开始，视频依赖项已被删除，但您仍然可以尝试使用此道具renderMessageVideo

于 2019-11-06T09:17:51.303 回答
0

我试过 renderMessageVideo ，可以看到视频。但是遇到了不同的问题，视频也与文本和图像组件的空白空间一起显示

renderMessageVideo(props) {
  console.log("videoprop:", props.currentMessage.video);
    return <View style={{ position: 'relative', height: 150, width: 250 }}>

    <Video
    style={{
      position: 'absolute',
      left: 0,
      top: 0,
      height: 150,
      width: 250,
      borderRadius: 20,
    }}
    shouldPlay
  isLooping
  rate={1.0}
  resizeMode="cover"
    height={150}
    width={250}
    muted={true}
    source={{ uri: "https://www.w3schools.com/html/mov_bbb.mp4" }}
    allowsExternalPlayback={false}></Video>

    </View>
}

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

renderSend={this.renderSend}
scrollToBottom
scrollToBottomComponent={this.scrollToBottomComponent}
renderActions={this.renderActions}
renderMessageVideo={this.renderMessageVideo}
/>
于 2020-05-13T17:01:27.820 回答