javascript - React Native-使用NativeBase Drawer时无法读取未定义的属性'_root'

我正在尝试使用NativeBase Drawer组件，但出现此错误：


  无法读取未定义的属性“ _root”


我按照他们的documentation中的说明进行操作，而我的App组件包装在NativeBase Root组件下。

App.js：

import React, { Component } from "react";
import { Root } from "native-base";
import { createStackNavigator } from "react-navigation";
import HomeScreen from "./screens/HomeScreen/HomeScreen";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Root>
        <AppStackNavigator />
      </Root>
    );
  }
}

const AppStackNavigator = createStackNavigator({
  Home: HomeScreen
});

HomeScreen.js：

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { Drawer } from "native-base";
import SideBar from "../../components/SideBar";

class HomeScreen extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: "Home",
      headerLeft: (
        <Button onPress={navigation.getParam("openDrawer")}>
          <Icon name="menu" />
        </Button>
      )
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({ openDrawer: this._openDrawer });
  }

  closeDrawer() {
    this.drawer._root.close();
  }
  _openDrawer() {
    this.drawer._root.open();
  }

  render() {
    return (
      <Container>
        <Drawer
          ref={ref => {
            this.drawer = ref;
          }}
          content={<SideBar navigator={this.navigator} />}
          onClose={() => this.closeDrawer()}
        >
          <Content>
          <Text>Home</Text>
          </Content>
        </Drawer>
      </Container>
    );
  }

}

export default HomeScreen;

最佳答案

您应该将_openDrawer更改为（因为您的函数不了解上下文this）

_openDrawer = () => {
   this.drawer._root.open();
}