反应本机。在反应导航中隐藏来自 BottomTab.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 页面中的 link 访问 Page。

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

我尝试从 <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");

导航到该页面

反应本机。在反应导航中隐藏来自 BottomTab.Navigator 的项目

React Native. Hiding item from BottomTab.Navigator in react-navigation

javascript

navigation

react-native

react-navigation