亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

結合 Stack 和 Drawer 構建 TabNavigator

結合 Stack 和 Drawer 構建 TabNavigator

慕容708150 2023-05-19 17:44:14
我目前構建了這些導航器:const MainStackNavigator = () => {return (  <Stack.Navigator  screenOptions={{    cardStyle: {backgroundColor: theme['primaryColor']},    header: () => <MenuComponent />,  }}>  <Stack.Screen name="Logins" component={LoginScreen} />  <Stack.Screen name="Swipe" component={SwipeScreen} />  <Stack.Screen name="List" component={ListScreen} />  <Stack.Screen name="Detail" component={DetailScreen} /></Stack.Navigator>);};return (  <Root>    <NavigationContainer>      <Drawer.Navigator        screenOptions={{swipeEnabled: false}}        drawerContent={(props) => <SidebarComponent {...props} />}        initialRouteName="Login">        <Drawer.Screen name="List" component={MainStackNavigator} />      </Drawer.Navigator>    </NavigationContainer>  </Root>);我需要在“滑動”屏幕上另外添加一個 TabNavigator,這樣我就可以再構建 3 個屏幕并在它們上面滑動
查看完整描述

1 回答

?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

您可以TabNavigator使用所需的屏幕創建一個。然后將它包含在您MainStackNavigator而不是Swipe屏幕組件中。


首先,您可以創建TabNavigator這樣的。


import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


const Tab = createBottomTabNavigator();


const TabNavigator = () => {

  return (

    <Tab.Navigator>

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

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

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

    </Tab.Navigator>

  );

};

然后,將它包含在您MainStackNavigator而不是像Swipe這樣的屏幕組件中。


const MainStackNavigator = () => {

  return (

    <Stack.Navigator

      screenOptions={{

        cardStyle: { backgroundColor: theme['primaryColor'] },

        header: () => <MenuComponent />,

      }}>

      <Stack.Screen name="Logins" component={LoginScreen} />

      <Stack.Screen name="Tabs" component={TabNavigator} />

      <Stack.Screen name="List" component={ListScreen} />

      <Stack.Screen name="Detail" component={DetailScreen} />

    </Stack.Navigator>

  );

};

如果您對此有任何問題,請在這里發表評論。


查看完整回答
反對 回復 2023-05-19
  • 1 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號