无法读取 Native Base ActionSheet 上未定义的 属性 `_root`

Cannot read property `_root` of undefined on Native Base ActionSheet

我正在按照文档的建议将我的主要 App 组件包装在 Native Base <Root> 中。

看起来像这样:

import {AppRegistry} from 'react-native';
import { Root } from 'native-base';
import App from './App';
import {name as appName} from './app.json';

const RootApp = () => (
    <Root>
        <App />
    </Root>
);

AppRegistry.registerComponent(appName, () => RootApp);

然后我尝试像这样触发 ActionSheet:

<Button transparent onPress={
     () => ActionSheet.show({
       options: this.BUTTONS,
       cancelButtonIndex: this.CANCEL_INDEX,
       destructiveButtonIndex: this.DESTRUCTIVE_INDEX,
       title: i18n.t("settings")
     },
       buttonIndex => {
          alert('Logout was clicked ' + buttonIndex);
       }
     )}>
</Button>

然后抛出 Cannot read property _root of undefined

虽然我想让 Button 像这样调用它:

<Button onPress={ () => this.openSettings }></Button

openSettings 函数如下所示:

openSettings() {
    ActionSheet.show({
            options: this.BUTTONS,
            cancelButtonIndex: this.CANCEL_INDEX,
            destructiveButtonIndex: this.DESTRUCTIVE_INDEX,
            title: i18n.t("settings")
        },
        buttonIndex => {

            alert('Logout was clicked ' + buttonIndex);
        }
    )
}

但是还是没用。

有什么建议吗?

React-Native version: 0.57.8
Native-Base version: ^2.10.0

@msqar 我认为这是一个安装问题。可能是 native-base 没有正确安装。

它在我的项目中工作正常。 我将分享我的代码,也许它对你有帮助。 通过它。

package.json 看起来像这样。

index.js 文件

import React from "react";
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import { Root } from "native-base";

const RootApp = () => (
  <Root>
    <App />
  </Root>
);

AppRegistry.registerComponent(appName, () => RootApp);

App.js 文件

import React, { Component } from "react";
import {
  Container,
  Header,
  Button,
  Content,
  ActionSheet,
  Text
} from "native-base";
var BUTTONS = ["Option 0", "Option 1", "Option 2", "Delete", "Cancel"];
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  openSettings = () => {
    ActionSheet.show(
      {
        options: BUTTONS,
        cancelButtonIndex: CANCEL_INDEX,
        destructiveButtonIndex: DESTRUCTIVE_INDEX,
        title: "Testing ActionSheet"
      },
      buttonIndex => {
        alert("logout was clicked" + buttonIndex);
      }
    );
  };

  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Button
            transparent
            onPress={() =>
              ActionSheet.show(
                {
                  options: BUTTONS,
                  cancelButtonIndex: CANCEL_INDEX,
                  destructiveButtonIndex: DESTRUCTIVE_INDEX,
                  title: "settings"
                },
                buttonIndex => {
                  alert("Logout was clicked " + buttonIndex);
                }
              )
            }
          >
            <Text>Actionsheet1</Text>
          </Button>

          <Button transparent onPress={() => this.openSettings()}>
            <Text>Actionsheet2</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

我已经介绍了这段代码中的两种方法。

输出截图: