无法读取属性`_root`的不确定对天然碱基ActionSheet

Question

我包装我的主要应用程序组件的天然碱基<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 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

Answer 1

@msqar我认为这是安装问题。有可能是安装不正确本土基地。

这是在我的项目正常工作。我要分享，也许我的代码它可以帮助你。通过它去。

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

我已经涵盖你的这两个方法的代码。

输出截图：