React Native Gifted Chat 显示 vimeo 视频

vimeo 插件

https://www.npmjs.com/package/react-native-vimeo-iframe

renderMessageVideo

但是直接使用 Vimeo 组件，会报错：

Video is not implemented by GiftedChat. You need to provide your own implementation by using renderMessageVideo prop.

于是增加了 gifted chat 的自定义方法：

renderMessageVideo

WebView not support

增加了 renderMessageVideo 还是报错：

React Native WebView does not support this platform.

npm install react-native-webview

react-native-webview 仅支持移动平台，不支持 Web 平台。对于 Web 平台，可以使用 iframe 来嵌入 Vimeo 视频。

所以区分 Platform 做不同处理：

• web 端，继续沿用之前的 react 逻辑，使用自己封装的 iframe 组件
• app 端，则使用三方的 Vimeo 组件

代码

const renderMessageVideo = (props: any) => {
    const { currentMessage } = props
    if (currentMessage.video) {
      if (Platform.OS === 'web') {
        return (
          <div>
            <div>
              <iframe
                title="Some Video"
                src="https://player.vimeo.com/video/xxx"
                frameborder="0"
                width="300"
                height="361"
                allow="autoplay; fullscreen; picture-in-picture"
                allowfullscreen
              ></iframe>
            </div>
            <script src="https://player.vimeo.com/api/player.js"></script>
          </div>
        );
      } else {
        return (
          <Vimeo
              videoId={'xxx'}
              params={'api=1&autoplay=0'}
          />
        )
      }
    }
    return null
  }

  return (
    <GiftedChat
      messages={messages}
      onSend={msgs => onSend(msgs)}
      user={user}
      onQuickReply={handleQuickReply}
      renderMessageText={renderMessageText}
      renderMessageVideo={renderMessageVideo}
      renderTime={renderTime}
    />
  )

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式