javascript - React Native Web 导航路线问题

Question

我正在构建一个 RN 应用程序并使用 RNWeb 为 Web 构建它，但我遇到了两个问题。

首先，我需要去掉url路由中的一些名字，例如：

在我的App.js我有一个<NavigationContainer>在其中我有一个StackNavigator转到一个名为Main. 在Main屏幕中，我有一个带有 5 个不同选项卡屏幕的选项卡导航器。每个屏幕都是不同的，根据 TabNavigator 屏幕的上下文StackNavigator保存多个（例如：选项卡导航器上的设置将保存和内部将驻留屏幕组件。但问题是，它们显示在 url 中，例如例如：代替或代替StackScreensStackSettings.NavigatorAppSettingshttp://app.com/StackSettings/AppSettingshttp://app.com/AppSettingshttp://app.com/StackHome/Homehttp://app.com/Home

TLDR：我在每个选项卡导航中都有堆叠导航，并且 url 显示如下：http://app.com/StackNavigatorName/StackScreenName而不是http://app.com/StackScreenName

我遇到的第二个问题是，如果我转到另一个选项卡导航器（因此是另一个 StackNavigator）并返回到旧的（使用返回或从选项卡导航中选择它），我无法单击它上面的任何内容。

代码：

应用程序.js

 <NavigationContainer linking={{
            prefixes: ["localhost"],
            config:{
              screens:{
                Main: {
                  path: '/',
                },
              },
            },
          }}
        >
        
          <Stack.Navigator initialRouteName="Main" >
            <Stack.Screen name="Main" component"Main">
          </Stack.Navigator>
</NavigationContainer>
        

主.js

const StackNavigatorHome = () => (
    <StackHome.Navigator initialRoute="Home">
            <StackHome.Screen name="Home" component={Home}/>
            <StackHome.Screen name="Create" component={Create}/>
    </StackHome.Navigator>
)


const StackNavigatorSettings = () => (
    <StackSettings.Navigator initialRoute="Settings">
            <StackSettings.Screen name="Settings" component={Settings}/>
            <StackSettings.Screen name="AppSettings" component={AppSettings}/>
    </StackSettings.Navigator>
)

return(
<Tab.Navigator >
    <Tab.Screen name="StackHome" component={StackNavigatorHome} />
    <Tab.Screen name="StackSettings" component={StackNavigatorSettings} />
</Tab.Navigator>
)

标签： javascriptreactjsreact-nativereact-routerreact-navigation