Javascript 反应本机-无法读取属性'_根'；使用NativeBase抽屉时未定义的

我试图使用组件，但出现以下错误：

无法读取未定义的属性“\u root”

我按照他们的说明操作，我的

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
});

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;

import React，{Component}来自“React”；
从“本机基”导入{Root}；
从“反应导航”导入{createStackNavigator}；
从“/screens/HomeScreen/HomeScreen”导入主屏幕；
类型Props={}；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const AppStackNavigator=createStackNavigator({
主页：主屏幕
});

HomeScreen.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
});

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;

import React，{Component}来自“React”；
从“react native”导入{样式表、文本、视图}；
从“本机基”导入{Drawer}；
从“../../components/SideBar”导入侧栏；
类主屏幕扩展组件{
静态导航选项=（{navigation}）=>{
返回{
标题：“家”，
左校长：(
)
};
};
componentDidMount（）{
this.props.navigation.setParams（{openDrawer:this.\u openDrawer}）；
}
抽屉{
此.drawer._root.close（）；
}
_openDrawer（）{
此.drawer._root.open（）；
}
render（）{
返回(
{
this.drawer=ref；
}}
内容={}
onClose={（）=>this.closeDrawer（）}
>
家
);
}
}
导出默认主屏幕；

您应该将您的

\u openDrawer

更改为（因为您的函数不知道上下文

此

）

---

您应该将您的

\u openDrawer

更改为（因为您的函数不知道上下文

此

）

试试这个：

在

componentDidMount

中添加以下行：

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

试试这个：

在

componentDidMount

中添加以下行：

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

---

您是否忘记运行

npm install native base

？没有，其他NativeBase组件工作正常。我认为您的

应用程序应使用
Root
包装。换句话说，整个应用程序应该用
Root
包装。它已经用Root包装了。即使是Toast也可以正常工作。您是否忘记运行
npm install native base
？不，其他NativeBase组件也可以正常工作。我认为您的
应用程序应该使用
Root
包装。换句话说，整个应用程序应该用
Root
包装。它已经用Root包装了。即使是烤面包也可以。