在 React Native 的所有屏幕中渲染底部菜单

Question

我面临着反应底部导航的问题。我正在尝试弄清楚如何将底部导航菜单传递到所有屏幕。根据下面的代码，导航堆栈中的所有屏幕都可以。

const BottomNavigation = () => {

  return (
    <Tab.Navigator 
    tabBar={props => <MenuTab  {...props} />}

    screenOptions={{
      animation: 'slide_from_right'
  }}
                  initialRouteName="Home"
                  tabBarOptions={{
                  labelStyle: {fontSize: 12, marginTop: 5, fontWeight: 'bold'},
                  activeTintColor: "#5575DF",
                  inactiveTintColor: "#9e9e9e",
                  activeBackgroundColor: "#e5cfff",
                  }}

    >
      <Tab.Screen
        name="Home"
        component={HomeTab}
        options={{
          tabBarIcon: ({focused, color}) => (
              <TabBarIcon
                  focused={focused}
                  tintColor={color}
                  name="home-outline"
              />
          ),

      }}
    
      />
      <Tab.Screen
        name="One"
        component={One}
        options={{
          tabBarIcon: ({focused, color}) => (
              <TabBarIcon
                  focused={focused}
                  tintColor={color}
                  name="calendar-outline"
              />
          ),

      }}
    
      />
      <Tab.Screen
        name="Two"
        component={Two}
        options={{
          tabBarIcon: ({focused, color}) => (
              <TabBarIcon
                  focused={focused}
                  tintColor={color}
                  name="wallet-outline"
              />
          ),

      }}
      
      />
      
      <Tab.Screen
      name="Three"
      component={Three}
      options={{
        tabBarIcon: ({ focused, color }) => (
          <TabBarIcon
            focused={focused}
            tintColor={color}
            name="menu-outline"
          />
        ),
      }}
    >
    </Tab.Screen>
    </Tab.Navigator>
  );
};

export default BottomNavigation;

如何在打开时将底部菜单传递到名为 AnotherScreen 的屏幕。我不想将其作为菜单项包含在底部导航菜单中。

<NavigationContainer>
        <Stack.Navigator initialRouteName="Onboarding">
          <Stack.Screen
            name="Onboarding"
            component={SplashScreen}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="Bottom"
            component={BottomNavigation}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="AnotherScreen"
            component={AnotherScreen}
            options={{
              headerShown: true,
            }}
          />
          
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="Signup"
            component={SignUpScreen}
            options={{
              headerShown: false,
            }}
          />

          <Stack.Screen
            name="Forgotpassword"
            component={ForgotPassword}
            options={{
              headerShown: false,
            }}
          />

      
        
        </Stack.Navigator>
      </NavigationContainer>

Answer 1

在BottomTab 中传递组件时

"Home", "One", "Two", etc

。你必须通过

Stack

而不是

Single Screen

。

例如，在底部选项卡中

<Tab.Screen
     name="Home"
     component={HomeStack}
  ...  
/>

和

HomeStack

将由两个屏幕组件组成，即

HomeScreen

、

AnotherScreen