无法读取 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>
);
}
}
我已经介绍了这段代码中的两种方法。
输出截图:
我正在按照文档的建议将我的主要 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>
);
}
}
我已经介绍了这段代码中的两种方法。
输出截图: