React Navigation 从一个页面到另一个页面不起作用
2019-04-13
236
我正在使用 React native 为 iOS 和 Android 开发多页应用程序。
我使用 React Navigation 从一个页面导航到另一个页面。但不知何故它不起作用 &给出错误消息。
这是我到目前为止所做的。
App.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Settings from './Settings';
import Home from './Home';
const AppNavigator = StackNavigator({
SettingScreen: { screen: Settings },
HomeScreen: { screen: Home }
});
export default class App extends Component {
render() {
return (
<AppNavigator />
);
}
}
Home.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export class Home extends Component {
render() {
return (
<View>
<Text>This is the home screen</Text>
</View>
)
}
}
export default Home
Settings.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Settings extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
<Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>
</View>
)
}
};
export default Settings;
这是我收到错误消息的方式:
任何帮助或提示都将不胜感激。
注意:
- 我正在尝试在 iOS 上运行它
- 我已按照文档
1个回答
对于 React Navigation 版本 > 3,您可以像这样配置路由器:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Settings from './Settings';
import Home from './Home';
const AppNavigator = createStackNavigator({
SettingScreen: { screen: Settings },
HomeScreen: { screen: Home }
});
export default createAppContainer(AppNavigator);
您也可以阅读 此处 的文档 希望这对您有所帮助。
Ali SabziNezhad
2019-04-13