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

Answer 1

遇到同样的问题，希望对您有所帮助：

every

Answer 2

您可以像这样为导航容器创建一个引用

import * as React from 'react';

const navigationRef = React.createRef();
    
<NavigationContainer ref = {navigationRef} />

将NavigationRef作为参数传递给Header

访问导航道具并导航到相应的屏幕，如下所示

  navigationRef.current?.navigate("<SCREEN_NAME>")

如何使用onPress事件按钮

2 个答案: