React Native 选项卡导航器答案

【问题标题】：React Native Tab NavigatorReact Native 选项卡导航器
【发布时间】：2021-09-25 05:15:12
【问题描述】：

我对 React Native 完全陌生，我目前正在尝试在子/详细信息页面上显示 BottomTabNavigator，例如：我有一个名为 Training 的页面，还有另一个名为 TrainingDetails 的页面。

我想在 TrainingDetails 上显示 BottomTabNavigator。

事实上，我想在所有页面、主页和详细信息页面中显示 BottomTabNavigator。

这是我的 Main.js 非常感谢！

  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator tabBarOptions={{ activeTintColor: theme.colors.primary, inactiveTintColor: theme.colors.neutral_100, style: {backgroundColor: theme.colors.active} }}>
      <Tab.Screen
        options={{
          title: "Trabalhar",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"headset"} size={size} color={color} />
          ),
        }}
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          title: "Estudar",
          tabBarIcon: ({ focused, color, size }) => (
            <SimpleLineIcon name={"graduation"} size={size} color={color} />
          ),
        }}
        name="Study"
        component={Training}
      />
      <Tab.Screen
        options={{
          title: "Notificações",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"bell-outline"} size={size} color={color} />
          ),
        }}
        name="Notification"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          title: "Resultados",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"trending-up"} size={size} color={color} />
          ),
        }}
        name="Results"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          title: "Carteira",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"wallet-outline"} size={size} color={color} />
          ),
        }}
        name="Wallet"
        component={HomeScreen}
      />
    </Tab.Navigator>
  );
};
export default Main;

【问题讨论】：

标签： react-native react-navigation-bottom-tab react-native-tabnavigator

【解决方案1】：

您可以将 stackNavigator 放在选项卡导航器中，例如，如果您想要一个主屏幕，然后是另一个名为 details 的屏幕，底部没有选项卡，但底部仍然有选项卡，您可以替换带有 homeStack 的主屏幕，其中包含主屏幕和详细信息屏幕。

const Stack = createStackNavigator();

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Details" component={Details} />
    </Stack.Navigator>
  );
}

然后将选项卡导航器中的 home 组件替换为 HomeStack 组件。

【讨论】：