0

在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。但是该视频没有显示在聊天屏幕中，因此我无法单击并播放该视频。上面的代码在有天赋的聊天中显示视频（图像）缺少什么？我需要为视频或图像启用某些道具吗？

4

1 回答 1

1

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

有天赋的聊天泡泡.tsx

并且我可以将图片和视频放入天才聊天室后，请记住执行以下操作

  1. 导入 Bubble.tsx
  2. 写一个渲染气泡函数
  3. 最后将renderBubble函数放入props中

这将是天才聊天的导入，在包含天才聊天的代码开头导入它

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

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

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

}

然后在渲染函数中，返回以下内容，确保 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 上的天才聊天的奇怪结构，它会花费更多的时间来弄清楚天才聊天是如何工作的并获得所有的依赖关系

于 2019-09-29T06:08:33.760 回答