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

Question

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

Cannot read property '_root' of undefined

我按照他们 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;

Answer 1

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

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

Answer 2

试试这个：

在 componentDidMount 中添加这些行：

this.closeDrawer = this.closeDrawer.bind(this);
this._openDrawer = this._openDrawer.bind(this);