createBottomTabNavigator 隐藏一些标签

Question

我为一个屏幕的 react native 6 定义了以下选项卡导航器，所以总共有 3 个屏幕 A、B 和 C。但我不想显示“C”，因为它可以通过从 A.

导航到达

const Tab = createBottomTabNavigator();
const Main: () => React$Node = props => {
  return (
    <Tab.Navigator
      <Tab.Screen name={Routes.A} component={A} />
      <Tab.Screen name={Routes.B} component={B} />
      <Tab.Screen name={Routes.C} component={C} />
    </Tab.Navigator>
  );
};

已经有一个使用样式隐藏的解决方案component C。但是在从 5 升级到 6 之后，它已经停止工作，我阅读了文档并尝试使用新属性但没有成功，

tabBarOptions={{
        showLabel: false,
        style: {
          height: Dimensions.DIMENSION_BOTTOM_TAB_BAR_HEIGHT,
          width: '200%',
          paddingBottom: 0,
        },
        visible: false,
      }}>

那么 React 6 设置宽度的方法是什么 component C 可以隐藏？另一个问题是（我是新来的），有没有办法将组件 C 添加到当前屏幕的路由中，甚至不用它作为 <Tab.Screen>。这是来自 ComponentA 的内容，这里理想的解决方案是在此处添加 ComponentC 但我尝试在 MenuItem 中添加组件绑定但没有成功，它抱怨 there is no such route handled by any navigator。与使用 createStackNavigator

不同

const Menu: () => React$Node = props => {
  return (Colors.COLOR_BLACK]}
    <VScrollLayout contentContainerStyle={{flexGrow: 1}} style={styles.content}>
      <View style={styles.innerContainer}>
        <MenuItem
          image={<Image source={Images.ICON_C} />}
          text={i18n.t('C')}
          route={Routes.C}
          navigation={props.navigation}
        />
        
      </View>
    </VScrollLayout>
  );
};

Answer 1

正确的导航是将 TabNavigation 作为根（主）导航，并且在每个选项卡中都有一个 StackNavigation。如果您需要从 A 和 B 访问屏幕 C，您可以将它们添加到两个 StackNavigations 中。（A + C 和 B + C）。

编辑：

代码：

const TabAStack = createStackNavigator();
function TabAStackNavigation() {
  return (
    <TabAStack.Navigator >
      <TabAStack.Screen name={Routes.A} component={A} />
      <TabAStack.Screen name={Routes.C} component={C} />
    </TabAStack.Navigator>
  );
}

const TabBStack = createStackNavigator();
function TabAStackNavigation() {
  return (
    <TabAStack.Navigator >
      <TabAStack.Screen name={Routes.B} component={B} />
      <TabAStack.Screen name={Routes.C} component={C} />
    </TabAStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();
const Main: () => React$Node = props => {
  return (
    <Tab.Navigator
      <Tab.Screen name={Routes.TabA} component={TabAStackNavigation} />
      <Tab.Screen name={Routes.TabB} component={TabBStackNavigation} />
    </Tab.Navigator>
  );
};

Answer 2

通过为我要显示的选项卡设置额外宽度来解决问题

<Tab.Screen name={Routes.A} component={A} options={{ tabBarStyle: { width: '500%' } }}/>
<Tab.Screen name={Routes.B} component={B} options={{ tabBarStyle: { width: '500%' } }}/>
<Tab.Screen name={Routes.C} component={C} options={{ tabBarStyle: { width: '200%' } }}/>

我完全理解这是一个丑陋的解决方案，但在我学习如何将 ComponentC 添加到 VScrollLayout

之前它会保留下来

createBottomTabNavigator 隐藏一些标签

createBottomTabNavigator hide some tabs

react-native

react-navigation-stack