如何在react-native-web中创建web特定组件？

Question

我想用react-native创建一个视频流媒体应用，并通过react-native-web推出其web版本，这样我就可以共享代码库。不幸的是，我无法理解如何在浏览器的上下文中正确地创建一个例如 <video /> 元素的方法。

这是我目前所拥有的。

import { RTCView, /* ... some other components */ } from 'react-native-webrtc';
import { Platform } from 'react-native';

const VideoViewNative = () => {
  // Some logic

  return <RTCView {/* props for RTCView */};
}

const VideoViewWeb = () => {
  return <video {/* props for web video */} />;
}


export default Platform.OS === 'web' ? VideoViewWeb : VideoViewNative;

虽然它的工作原理和预期一样，但 "感觉 "并不正确。我想我在这里绕过了react-native-web，并在以后得到了一些缺点。

什么才是实现我想实现的正确方法，为什么上面的方法是错误的？

Answer 1

你可以尝试将代码分割成单独的文件。React Native会检测一个文件是否有.ios.或.android.或.web.扩展名，并在其他组件需要时加载相关平台文件。

例如

VideoView.native.js 对于android和ios，也可以单独的平台专用VideoView.ios.js和VideoView.android.js。

VideoView.js 为其他平台，也可以将其做成 VideoView.web.js

然后你可以按照以下方式要求该组件。

import VideoView from './VideoView';

React Native会根据运行平台自动获取正确的文件。