如何使用按钮onPress事件打开抽屉式导航器

Question

我使用React Navigation 5.x]添加了抽屉式导航器。滑动屏幕时，它可以正常工作。但是，当我按“标题”部分中的汉堡图标时，我想显示它。标头是一个单独的组件和抽屉式导航器，当前位于以下app.js文件中。

App.js

const Drawer = createDrawerNavigator();

const Stack = createStackNavigator();

    function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Login" component={Login} />
      <Drawer.Screen name="Register" component={Register} />
      <Drawer.Screen name="Place an Order" component={Order} />
      <Drawer.Screen name="Place an Order_temp" component={OrderPage} />
    </Drawer.Navigator>
  );
}

const App = () => {
  return (
    <View style={styles.container}>
      <Header />
      <NavigationContainer>
        <MyDrawer />
      </NavigationContainer>
    </View>
  );
};
Header.js

const Header = () => {
  return (
    <View style={styles.child}>
      <Image
        source={require("../../assets/image/shared/logo-nav.png")}
        style={styles.logo}
      />
      <Ripple rippleColor="rgb(255,255,255)" style={styles.buttonContainer}>
        <FontAwesome.Button
          name="bars"
          color="#ffcc00"
          style={styles.barButton}
        ></FontAwesome.Button>
      </Ripple>
    </View>
  );
};
currently drawer showing like this way when swipe the screen

我使用React Navigation 5.x添加了一个抽屉式导航器。滑动屏幕时，它可以正常工作。但是，当我按“标题”部分中的汉堡图标时，我想显示它。标头是一个单独的组件...

Answer 1

有同样的问题希望有帮助：