react-native - 用按钮反应本机打开抽屉

Question

我有一个带有一些屏幕的抽屉导航器。其中一个屏幕是 TabNavigator。现在我想实现一个 HamburgerMenu-Button 来打开所有 Tab-Navigator 屏幕中的抽屉。

我在哪里实现该按钮？在 TabNavigator 或其子屏幕或抽屉屏幕中？

以下是一些代码片段：

抽屉导航器：

export default class DrawerMenu extends React.Component {
 render() {
  return (
   <Drawer.Navigator initialRouteName='Home'>
    <Drawer.Screen name='Home' component={TabNavigator} />
    <Drawer.Screen name='About Us' component={AboutUsScreen} />
    <Drawer.Screen name='About the App' component={AboutTheAppScreen} />
    <Drawer.Screen name='Impressum' component={ImpressumScreen} />
   </Drawer.Navigator>
  );
 }
}

标签导航器：

const Tab = createBottomTabNavigator();
const TabNavigator = () => {
 return (
  <Tab.Navigator tabBar={(props) => <TabBar {...props}></TabBar>}>
   <Tab.Screen
    name='Tab1'
    component={Tab1}
    initialParams={{ icon: 'info' }}
   ></Tab.Screen>
   <Tab.Screen
    name='Tab2'
    component={Tab2}
    initialParams={{ icon: 'circle-o-notch' }}
   ></Tab.Screen>
   <Tab.Screen
    name='Tab3'
    component={Tab3}
    initialParams={{ icon: 'home' }}
   ></Tab.Screen>
   <Tab.Screen
    name='Tab4'
    component={Tab4}
    initialParams={{ icon: 'glass' }}
   ></Tab.Screen>
   <Tab.Screen
    name='Tab5'
    component={Tab5}
    initialParams={{ icon: 'road' }}
   ></Tab.Screen>
  </Tab.Navigator>
 );
};

TabNavigator 中的单个屏幕：

const Tab1 = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Tab1</Text>
        </View>
    );
};

任何帮助表示赞赏。

Answer 1

最后，这是一个简单的答案。我们只需要通过道具给予。（我认为）

TabNavigator 中的单个屏幕：

const Tab1 = ({navigation}) => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Tab1</Text>
        </View>
    );
};

这样我们就可以轻松地navigation.openDrawer在 onPress 事件中使用该函数。