createBottomTabNavigator 隐藏一些标签答案

【问题标题】：createBottomTabNavigator hide some tabscreateBottomTabNavigator 隐藏一些标签
【发布时间】：2021-11-05 14:43:03
【问题描述】：

我为一个屏幕定义了以下标签导航器，用于响应原生 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。但是在将 react 从 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>
  );
};

【问题讨论】：

如果用户可以使用 Tab A 访问 Tab C，那么您可以从列表中删除该 Tab 并将其添加到导航堆栈中。

标签： react-native react-navigation-stack

【解决方案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>
  );
};

【讨论】：

将屏幕A的内容添加到原始问题中，不知道如何在其中添加C，请查看

【解决方案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 之前它会一直存在

【讨论】：