从底部选项卡打开抽屉导航器 [英] Opening the Drawer navigator from the bottom tab

问题描述

我正在将我的应用从 react-navigation 4 升级到 5.

I'm upgrading my App from react-navigation 4 to 5.

在第 4 版中，我有一个选项卡可以使用以下代码打开抽屉

In version 4 I have a tab that open the drawer using the following code

const MainNavigator = createBottomTabNavigator(
  {
More: {      
      screen: AdminNavigator,
      navigationOptions: {
        tabBarIcon: (tabInfo) => {
          //return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />;
          return (
            <Icon
              name="tune"
              color={tabInfo.tintColor}
              size={tabInfo.focused ? 32 : 28}
              style={{
                paddingTop: 10,
              }}
            />
          );
        },
        tabBarColor: Colors.primary,       
        tabBarOnPress: ({ navigation }) => {
          navigation.openDrawer();
        },
      },
    },
}

在新版本 5 中，我有以下导航配置

In new version 5 I have the following Navigation config

<NavigationContainer>          
    <Drawer.Navigator>
       <Drawer.Screen name="Home" component={TabsScreen} />
       <Drawer.Screen name="Favorites" component={FavoritesStackScreen} />
       <Drawer.Screen name="Language" component={LanguageStackScreen} />
    </Drawer.Navigator>
</NavigationContainer>

其中 TabScreen 是我的底部标签导航器

where TabScreen is my bottom tab navigator

const TabsScreen = () => (
    <Tabs.Navigator>
        <Tabs.Screen name={"Home"} component={HomeStackScreen} />
        <Tabs.Screen name={"Cocktails"} component={CocktailsStackScreen} />
        <Tabs.Screen 
            name={"More"} 
            component={HomeStackScreen} 
            options={{
                ...
            }}
        />
    </Tabs.Navigator>
);

我正在寻找以下 V5 中的等效项

I'm looking for the equivalent in V5 of the following

tabBarOnPress: ({ navigation }) => {
          navigation.openDrawer();
        },

推荐答案

尝试以下操作:

<Tabs.Screen 
  name={"More"} 
  component={HomeStackScreen} 
  listeners={({ navigation }) => ({
    tabPress: e => {
      e.preventDefault();
      navigation.openDrawer();
    }
  })}
/>

https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

这篇关于从底部选项卡打开抽屉导航器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！