反应原生。在反应导航中隐藏底部 Tab.Navigator 中的项目

Question

假设我有 3 页。 Home、Settings、Page。

我有

<BottomTab.Navigator>
  <BottomTab.Screen name="Home" component={HomeScreen}/>
  <BottomTab.Screen name="Settings" component={SettingsScreen}/>
  <BottomTab.Screen name="Page" component={PageScreen}/>
</BottomTab.Navigator>

所有 3 个都显示在底部导航中。

我想从底部导航访问Home 和Settings，从Home 页面内的链接访问Page。

我的问题是有没有办法从底部导航隐藏Page，但仍然从其他页面链接到它并将道具和数据传递给它？

我尝试从<BottomTab.Screen> 中删除Page，但后来我无法使用navigation.navigate("Page") 导航到页面，我需要这个以便将道具和数据传递到该页面

这是来自应用程序的一些代码。这段代码是用expo生成的

// App.js
render (
<NavigationContainer
          ref={containerRef}
          initialState={initialNavigationState}
        >
          <Stack.Navigator>
            <Stack.Screen name="Root" component={BottomTabNavigator} />
          </Stack.Navigator>
        </NavigationContainer>
      </View>
)

//bottomTabNavigator component
<RootStack.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <RootStack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: "Get Started",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-code-working" />
          ),
        }}
      />
      <RootStack.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarVisible: false,
          title: "Your Profile",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-book" />
          ),
        }}
      />
    </RootStack.Navigator>

谢谢

Answer 1

我不确定我是否理解正确，但我认为这就是你要找的。

https://reactnavigation.org/docs/stack-navigator/

安装完所有东西后，你可以做这样的事情

const RootStackNavigator = () => {
    return(
        <RootStack.Navigator>
            <RootStack.Screen name="main" component = {BottomStackScreen}/>
            <RootStack.Screen name="Page" component={PageScreen} />
        </RootStack.Navigator>
    )
}

因此，在您的代码中，您可以将 app.js 切换为：

<Stack.Navigator>
   <Stack.Screen name="Root" component={BottomTabNavigator} />
   <Stack.Screen name="Page" component={PageScreen} />
</Stack.Navigator>

然后你可以使用this.props.navigation.navigate("Page");导航到页面