首先要确认已经配置好react-native的环境。
npm install --save react-navigation
运行程序
react-native run-android
引入Stack Navigator
对于我们的应用程序，我们想要使用堆栈式导航器，因为我们想要一个概念的“堆栈”导航，其中每个新屏幕都放在堆栈顶部，然后从堆栈顶部移除一个屏幕。
static navigationOptions = {
title: 'Welcome world',};
render() {
return
}
}
屏幕的title在静态导航选项中是可配置的，在这里可以设置许多选项来配置导航器中的屏幕显示。
添加一个新的屏幕
然后在HomeScreen添加一个按钮，链接到ChatScreen
在这里，可以传递参数，从HomeScreen传递
ChatScreen接收参数
添加第三个页面，Three.js， ChatScreen跳转到Three
static navigationOptions = {
title: 'Three Sceen',};
render() {
const { goBack } = this.props.navigation;
return (
<Button
title="Go back"
onPress={() => goBack()}
/>
);
}
}
export default Three;
修改ChatScreen的配置
title: 'Chat with Lucy',};
render() {
const { navigate } =
this.props.navigation;
return (
<Button
onPress={() =>
navigate('Three')}
title="to to ThreeScreen"
/>
);
}
}
最后的结果如下：
最后给出完整代码
文件 index.android.js
文件App.js
AppRegistry,} from 'react-native';
import { StackNavigator }
from 'react-navigation';
import ThreeScreen
from './Three.js';
class HomeScreen
extends React.Component {
static navigationOptions = {
title: 'Welcome',};
render() {
const { navigate } =
this.props.navigation;
return (
<Button
onPress={() =>
navigate('Chat')}
title="Chat with Lucy"
/>
);
}
}
class ChatScreen
extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',};
render() {
const { navigate } =
this.props.navigation;
return (
<Button
onPress={() =>
navigate('Three')}
title="to to ThreeScreen"
/>
);
}
}
const SimpleApp =
StackNavigator({
Home: { screen:
HomeScreen },Chat: { screen:
ChatScreen },Three: { screen:
ThreeScreen},});
AppRegistry.registerComponent('SimpleApp',()
=> SimpleApp);
文件Three.js
AppRegistry,} from 'react-native';
class Three
extends React.Component {
static navigationOptions = {
title: 'Three Sceen',};
render() {
const { goBack } =
this.props.navigation;
return (
<Button
title="Go back"
onPress={() =>
goBack()}
/>
);
}
}
export default
Three;
