React Native中如何从其他组件控制Drawer的开关

你已经走对了第一步——通过props把Drawer实例传递给Header组件，接下来只需要在Header里利用这个实例调用Drawer的控制方法即可。下面是具体的修改步骤和完整代码：

1. 完善Header组件的开关方法 #

在Header组件中，你已经拿到了通过props传递过来的drawer实例，只需要在handleDisplayDrawer方法里调用Drawer的切换方法（不同库的方法名可能略有差异，比如toggle()、toggleDrawer()或open()/close()）：

class Header extends Component {
  handleDisplayDrawer = () => {
    // 调用Drawer实例的toggle方法切换开闭状态
    if (this.props.drawer) {
      this.props.drawer.toggle();
      // 如果你的Drawer库没有toggle方法，可以手动判断状态：
      // this.props.drawer.isOpen() ? this.props.drawer.close() : this.props.drawer.open();
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.handleDisplayDrawer} style={styles.colSmall} underlayColor="#ffffff" >
          <Image style={styles.icon} resizeMode="contain" source={require("./images/icon-menu.png")} />
        </TouchableHighlight>
      </View>
    );
  }
}

2. 补全Home组件的开关方法（可选） #

你在Home的render里调用了this.handleDisplayDrawer，但代码里没有定义这个方法，所以需要补充上：

class Home extends Component {
  // 补全开关方法
  handleDisplayDrawer = () => {
    this.drawer.toggle();
  };

  render() {
    const drawerContent = <DrawerComp />;
    return (
      <Drawer ref={comp => { this.drawer = comp; }}
        drawerWidth={250}
        drawerContent={drawerContent}
        type={Drawer.types.Overlay}
        drawerPosition={Drawer.positions.Right}
        maskAlpha={0.05}
        onDrawerOpen={() => {
          console.log("Drawer is opened !");
        }}
        onDrawerClose={() => {
          console.log("Drawer is closed !");
          this.props.dispatch(displayDrawer());
        }}
      >
        <Container>
          <StatusBar barStyle="light-content" />
          {/* 已经正确传递drawer实例 */}
          <Header drawer={this.drawer} />
          <TouchableHighlight underlayColor="#118d95" onPress={this.handleDisplayDrawer} >
            <Text>Open Right Drawer</Text>
          </TouchableHighlight>
        </Container>
      </Drawer>
    );
  }
}

关键说明 #

• props传递正确性：你已经通过<Header drawer={this.drawer} />把Drawer的ref实例传递给了Header，这是核心步骤，确保Header能拿到控制Drawer的入口。
• Drawer库API适配：不同的Drawer组件库（如react-native-drawer、自定义Drawer组件）的控制方法可能不同，比如有些库用openDrawer()/closeDrawer()，有些用toggle()，你需要根据自己使用的库调整方法名。如果是自定义的Drawer组件，需要确保组件内部暴露了这些控制方法。
• 空值判断：添加if (this.props.drawer)的判断可以避免组件初始化时可能出现的空指针错误。

内容的提问来源于stack exchange，提问作者Mort