react-native - 使用 RN、React Navigation 和 React Native Web 的通用应用程序最佳实践

Question

世博会近期发布makes it simple ，或者至少有可能，将对 Web 的支持添加到 React Native 应用程序中。假设一个人正在使用 RNW 和 React Navigation，那么构建一个既可以作为移动应用程序又可以作为 Web 应用程序的应用程序的最佳实践是什么？应该在代码中的什么位置分支移动应用程序和 Web 之间的逻辑？

我在下面提供了部分答案和一些资源。感谢您提供更多资源和回复。

Answer 1

以下是部分答案、重要注意事项以及进一步研究的可能起点。

屏幕尺寸

除非您有资源为小屏幕和大屏幕创建完全独立的 View ，否则让您的应用在台式机/笔记本电脑屏幕上看起来合理的一种方法是添加水平边距。这可以通过包装你的具有如下 View 的应用程序导航器:

<View
  onLayout={this._handleLayout}
  style={[styles.appContainer, this.state.isWide && styles.wide]}>

和

  _handleLayout = ({ nativeEvent }) => {
    const { width } = nativeEvent.layout;
    this.setState(() => ({ isWide: width > 600 }));
  };

标签栏、页眉和其他导航元素

React Navigation 内置了对标题栏和标签栏的支持，但是，台式机/笔记本电脑屏幕上的标准移动布局看起来很难看。由于您可能正在使用专为移动设备设计的导航器组件，例如 createBottomTabNavigator 和 createDrawerNavigator，因此一种选择是为桌面布局制作自定义导航器。这可能需要一些工作，因为没有用于桌面布局的标准导航器组件。

另一个问题是你可能希望你的标题栏不同，因为有更多的空间来添加导航元素、搜索栏等。React Navigation 没有提供如何做到这一点的例子，所以这可能很困难。

Web URL、路由器、服务器渲染等

React Navigation 3.x docs say该网络支持应被视为试验性的，并在这些问题上提供了稀疏的指导。 react-navigation/web模块提供“用于在 Web 浏览器和服务器上进行 react 导航的工具”，但文档很少。使用 SwitchRouter 设置简单 Web 应用程序的示例 can be found here .但是，我找不到任何关于在路由中使用 URL 参数的信息。