使用 Next JS 和 React Navigation 反应原生 Web

Question

我正在尝试确定在我的 React Native Web 项目中设置路由的最佳方式。我正在使用 expo 并按照本指南使用 Next JS https://docs.expo.io/versions/latest/guides/using-nextjs/所以我有这样的 App.js：

import index from "./pages/index";
import alternate from "./pages/alternate";
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator(
  {
    index,
    alternate
  },
  {
    initialRouteName: "index"
  }
);

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

我关心的是如何最好地处理路由。我目前有这样的 index.js 页面设置。

import * as React from 'react'
import { StyleSheet, Button, Text, View } from 'react-native'


export default function App ({navigation}) {
  return (
    <View style={styles.container}>

      {/* Native route */}
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("alternate")}
      />

      {/* Web route */}
      <Text style={styles.link} accessibilityRole="link" href={`/alternate`}>
        A universal link
      </Text>
    </View>
  );
}

如您所见，目前需要单独的代码来呈现 Native 与 Web 路由。我想知道处理这种渲染的最佳方法是什么。我研究过将React Navigation 用于 Web并且不会反对这一点，但似乎我应该坚持使用 Next Router。

在此先感谢您提供有关处理这样的条件渲染的任何建议。

Answer 1

使用reactnavigation网络支持

https://reactnavigation.org/docs/en/web-support.html

import { createSwitchNavigator } from "@react-navigation/core";
import { createBrowserApp } from "@react-navigation/web";

const MyNavigator = createSwitchNavigator(routes);

const App = createBrowserApp(MyNavigator);

// now you can render "App" normally