Html 如何在react native web中创建特定于web的组件？

我希望使用react native创建一个视频流应用程序，并通过react native web推出其web版本，以便共享代码库。不幸的是，我不知道如何在浏览器上下文中正确创建例如

元素

这就是我目前拥有的：

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 webrtc'导入{RTCView，/*…一些其他组件*/}；
从“react native”导入{Platform}；
const VideoViewNative=（）=>{
//一些逻辑
返回{
返回；
}
导出默认的Platform.OS=='web'？VideoViewWeb:VideoViewNative；

虽然这和预期的效果一样，但它“感觉”并不正确。我想我在这里绕过了react原生web，并从中获得了一些缺点

---

实现我想要实现的目标的正确方法是什么？为什么上面的方法是错误的？

您可以尝试将代码拆分为单独的文件。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将根据运行的平台自动拾取正确的文件。

谢谢：）这很有用。但是我可以在特定于web的组件中使用常规HTML视频标记吗？这会带来任何缺点吗？