Question

在react-native-gifted-chat主页上，有一个包含文本，图像和视频的消息对象示例：

{
  _id: 1,
  text: 'My message',
  createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
  user: {
    _id: 2,
    name: 'React Native',
    avatar: 'https://facebook.github.io/react/img/logo_og.png',
  },
  image: 'https://facebook.github.io/react/img/logo_og.png',
  // You can also add a video prop:
  video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
  // Any additional custom parameters are passed through
}

以下是可以很好地呈现文本消息的代码：

render() {
      return (
          <GiftedChat 
            messages={this.state.messages}
            onSend={messages => this._onSend(messages)}
            user={{_id: this.props.navigation.state.params.user.id,
                   name: this.props.navigation.state.params.user.name,
                   avatar: this.props.navigation.state.params.user.user_data.avatar}}
          /> 
      );
    }

我在消息数据中同时添加了image和video：

 r = {
            _id: '',
            text: '',
            image:"",
            video:"",
            createdAt : '',
            user: {
              _id: '',
              name: '',
              avatar: ''
            }
          };

并创建一条消息，其中消息video等于字符串http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4。但是该视频未显示在聊天屏幕中，因此我无法单击并播放该视频。上面的代码在天才聊天中显示视频（图像）缺少什么？我需要为视频或图像启用某些道具吗？

Answer 1

弄乱示例代码时，我发现在Gifted chat的源代码中有一个名为Bubble.tsx的ts文件

gifted-chat Bubble.tsx

我可以在将其放入天才聊天后显示图像和视频，只需记住要执行以下操作

导入Bubble.tsx
编写渲染Bubble函数
最后将renderBubble函数放入props

这将是礼物聊天的导入，请在包含礼物聊天的代码的开头将其导入

import { GiftedChat, Bubble } from 'react-native-gifted-chat';

renderBubble函数，添加到将呈现天才聊天的类中

 renderBubble = props => {
return (
  <Bubble
    {...props}
    wrapperStyle={{
      left: {
        backgroundColor: '#f0f0f0',
      },
    }}
  />
)

}

然后在render函数中，返回以下内容，确保renderBubble道具已填充了renderBubble函数

return(
  <GiftedChat
    messages={this.state.messages}
    onSend={firebaseSvc.send}
    loadEarlier={this.state.loadEarlier}
    onLoadEarlier={this.onLoadEarlier}
    isLoadingEarlier={this.state.isLoadingEarlier}
    parsePatterns={this.parsePatterns}
    user={this.user}
    scrollToBottom
    onQuickReply={this.onQuickReply}
    renderAccessory={this.renderAccessory}
    renderActions={this.renderCustomActions}
    renderBubble={this.renderBubble}//This is what you must add in the code
    renderSystemMessage={this.renderSystemMessage}
    renderCustomView={this.renderCustomView}
    quickReplyStyle={{borderRadius:2}}
    renderQuickReplySend={this.renderQuickReplySend}
    timeTextStyle={{left:{color:'red'},right:{color:'yellow'}}}
  />
)

实际上，您可以在Gifted-chat app.js中找到一个有效的演示，但是由于Github上的天才聊天的奇怪结构，它将花费更多的时间来了解天天聊天的工作原理并获取所有依赖项< / p>

在天才聊天中显示图片或视频

1 个答案: