Не удается прочитать свойство `_root` из неопределенного в Native Base ActionSheet

Question

Я обертываю свой основной компонент приложения в 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 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>
    );
  }
}

Я рассмотрел оба ваших подхода к этому коду.

Скриншот выходов: