Question

我将我的主要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 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>
    );
  }
}

我已经介绍了两种方法都可以使用此代码。

输出屏幕截图：

无法读取本机基本ActionSheet上未定义的属性“ _root”

1 个答案: