如何添加菜单以打开材质底部选项卡内的抽屉

Question

如何在材料底部选项卡内添加菜单以打开抽屉或切换抽屉，其中我单击底部选项卡导航中的菜单

请一些身体可以帮助我

这是我的代码：

function TabGroup (){
    return(
      <Tab.Navigator   screenOptions={{
        headerShown: false,
        tabBarActiveTintColor :'red',
        tabBarInactiveTintColor :'black',
      }} >
          <Tab.Screen name='Beranda' component={TopTabroup}
           options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color, size }) => (
              <Icon name="home" color={color} size={20} />
            ),
          }}
          /> 
          <Tab.Screen name='Topik' component={Topik}
           options={{
            tabBarLabel: 'TOPIK',
            tabBarIcon: ({ color, size }) => (
              <Icon name="microphone" color={color} size={20} />
            ),
          }}/> 
          <Tab.Screen name='Indonesiaku' component={Foto}
           options={{
            tabBarLabel: 'FOTO',
            tabBarIcon: ({ color, size }) => (
              <Icon name="image" color={color} size={20} />
            ),
          }}/> 
          <Tab.Screen name='Menu' component={BeritaIndonesia}
           options={{
            tabBarLabel: 'MENU',
            tabBarIcon: ({ color, size }) => (
              <Icon name="align-justify" color={color} size={20} />
            ),
          }}/> 
      </Tab.Navigator>
    )
  }

Answer 1

首先添加这些库

npx yarn add @react-navigation/native @react-navigation/material-bottom-tabs @react-navigation/drawer

然后添加自定义选项卡屏幕

const TopTabroup = () => <View><Button title="Tab 1" onPress={() => {}} /></View>;
const Topik = () => <View><Button title="Tab 2" onPress={() => {}} /></View>;
const Foto = () => <View><Button title="Tab 3" onPress={() => {}} /></View>;
const BeritaIndonesia = () => <View><Button title="Tab 4" onPress={() => {}} /></View>;

const Tab = createMaterialBottomTabNavigator();
const Drawer = createDrawerNavigator();

function CustomMenu({ navigation }) {
  return (
    <View>
      <Button title="Toggle Drawer" onPress={() => navigation.toggleDrawer()} />
    </View>
  );
}

还添加选项卡和屏幕的导航器

function TabGroup({ navigation }) {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: 'red',
        tabBarInactiveTintColor: 'black',
      }}>
      <Tab.Screen
        name="Beranda"
        component={TopTabroup}
        options={{
          tabBarLabel: 'Tab 1',
          tabBarIcon: ({ color, size }) => <Icon name="home" color={color} size={20} />,
        }}
      />
      <Tab.Screen
        name="Topik"
        component={Topik}
        options={{
          tabBarLabel: 'Tab 2',
          tabBarIcon: ({ color, size }) => <Icon name="microphone" color={color} size={20} />,
        }}
      />
      <Tab.Screen
        name="Indonesiaku"
        component={Foto}
        options={{
          tabBarLabel: 'Tab 3',
          tabBarIcon: ({ color, size }) => <Icon name="image" color={color} size={20} />,
        }}
      />
      <Tab.Screen
        name="Menu"
        component={() => <CustomMenu navigation={navigation} />}
        options={{
          tabBarLabel: 'Tab 4',
          tabBarIcon: ({ color, size }) => <Icon name="align-justify" color={color} size={20}
          />,
        }}
      />
    </Tab.Navigator>
  );
}


  export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Tabs">
        <Drawer.Screen name="All Tabs" component={TabGroup} />
        <Drawer.Screen name="Drawer Tab 1" component={TopTabroup} />
        <Drawer.Screen name="Drawe Tab 2" component={Topik} />
        <Drawer.Screen name="Drawe Tab 3" component={Foto} />
        <Drawer.Screen name="Drawe Tab 4" component={BeritaIndonesia} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

您也可以修改代码并在expo零食上查看完整代码

世博小吃链接