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

阅读更多 👀

React Native 跨平台应用开发教程

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式