React-Native 中選項卡外的獨立堆棧導航和抽屜導航

Question

我用

• 反應本機：0.68.2
• 反應導航/底部標簽：6.3.1
• 反應導航/抽屜：6.4.1
• 反應導航/本機：6.0.10
• 反應導航/堆棧：6.2.1

我有下一個導航結構：

<Drawer.Navigator>
   <Tab.Navigator>
      <Stack.Navigator>
         <Screen1>
         <Screen2>
      </Stack.Navigator>
   </Tab.Navigator>
</Drawer.Navigator>

它看起來像主屏幕左側和底部選項卡中的抽屜滑動菜單。 你可以通過下一個鏈接看到它的短視頻
我想要什么

我想從 Screen1 打開新屏幕，如獨立屏幕（沒有標簽和抽屜）。 它看起來像 Android 中的新 Activity 或 iOS 中的新視圖控制器。

Answer 1

你需要試試這個

const TabStack = () => {
  return (
    <Tab.Navigator
      initialRouteName="LiveRate"
      screenOptions={{
        tabBarActiveBackgroundColor: colors.activeTabColor,
        tabBarInactiveBackgroundColor: colors.inactiveTabColor,
        tabBarStyle: {
          backgroundColor: '#f46023',
          height:60
        },
      }}>
      <Tab.Screen
        name="LiveRate"
        component={LiveRateScreen}
        options={{
          tabBarLabel: () => {
            return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Live Rate</Text>)
          },
          headerShown: false,
            tabBarIcon: ({ focused }) => (
                <Image
                    source={
                    focused
                        ? Images.liverate
                        : Images.liverate
                    }
                    style={{
                        width: 30,
                        height: 30,
                        resizeMode:'contain'
                        // padding:5
                    }}
                />
            ),
        }}
      />
      <Tab.Screen
        name="AboutUs"
        component={AboutUsScreen}
        options={{
          tabBarLabel: () => {
            return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>About Us</Text>)
          },
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => (
            <Image
                source={
                focused
                    ? Images.aboutus
                    : Images.aboutus
                }
                style={{
                  width: 30,
                  height: 30,
                  resizeMode:'contain'
                    // padding:5
                }}
            />
        ),
        }}
      />
      <Tab.Screen
        name="booking"
        component={BookingNumberScreen}
        options={{
          tabBarLabel: () => {
            return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Booking Number</Text>)
          },
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => (
            <Image
                source={
                focused
                    ? Images.booking
                    : Images.booking
                }
                style={{
                  width: 30,
                  height: 30,
                  resizeMode:'contain'
                }}
            />
        ),
        }}
      />
      <Tab.Screen
        name="notification"
        component={NotificationScreen}
        options={{
          tabBarLabel: () => {
            return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Notification</Text>)
          },
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => (
            <Image
                source={
                focused
                    ? Images.notificationbell
                    : Images.notificationbell
                }
                style={{
                  width: 30,
                  height: 30,
                  resizeMode:'contain'
                }}
            />
        ),
        }}
      />
    </Tab.Navigator>
  );
};

const NavigationUtil = () => {

  return (
    <NavigationContainer  ref={navigationRef}>
          <Stack.Navigator initialRouteName="SlpashScreen">
            <Stack.Screen
              name="tabStack"
              component={TabStack}  <----- you also pass your drawer stack
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="Registration"
              component={RegistrationScreen}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="SlpashScreen"
              component={SlpashScreen}
              options={{headerShown: false}}
            />
          </Stack.Navigator>
        </NavigationContainer>
 );
};

這是我的代碼躍點它正在工作