React Native Web with Next JS and React Navigation

Question

我正在努力决定在我的React Native Web项目中设置路由的最佳方式。我正在使用expo，并遵循本指南使用Next JShttps://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，但我并不反对，但似乎我应该坚持使用Next Router。

提前感谢您对处理这样的条件呈现的任何建议。

Answer 1

使用的重新导航web支持

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

Answer 2

存在import { Platform } from 'react-native':

{Platform.OS === 'web' ? (
<Text
style={styles.link}
accessibilityRole="link"
href={`/alternate`}
>
A universal link
</Text>
) : (
<Button
title="Go to Details"
onPress={() => navigation.navigate("alternate")}
/>
)}