大佬教程收集整理的这篇文章主要介绍了react-native使用react-navigation进行页面跳转导航的示例，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
首先要确认已经配置好react-native的环境。
npm install --save react-navigation
react-native run-android
@H_489_10@对于@R_630_9616@程序，我们想要使用堆栈式导航器，因为我们想要一个概念的“堆栈”导航，其中每个新屏幕都放在堆栈顶部，然后从堆栈顶部移除一个屏幕。
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome world',};
render() {
return
}
}
AppRegistry.registerComponent('SimpleApp',() => SimpleApp);
@H_489_10@屏幕的title在静态导航选项中是可配置的，在这里可以设置许多选项来配置导航器中的屏幕显示。
添加一个新的屏幕
然后在HomeScreen添加一个按钮，链接到ChatScreen
最后将添加的两个页面添加到StackNavigator中
在这里，可以传递参数，从HomeScreen传递
ChatScreen接收参数
添加第三个页面，Three.js， ChatScreen跳转到Three
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;
修改ChatScreen的配置
static navigationOptions = {
title: 'Chat with Lucy',};
render() {
const { navigate } =
this.props.navigation;
return (
<Button
onPress={() =>
navigate('Three')}
title="to to ThreeScreen"
/>
}
}
@H_489_10@最后的结果如下：
最后给出完整代码
文件 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
import {
AppRegistry,} from 'react-native';
class Three
extends React.Component {
static navigationOptions = {
title: 'Three Sceen',};
render() {
const { goBACk } =
this.props.navigation;
return (
<Button
/>
}
}
export default
Three;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持菜鸟教程。
以上是大佬教程为你收集整理的react-native使用react-navigation进行页面跳转导航的示例全部内容，希望文章能够帮你解决react-native使用react-navigation进行页面跳转导航的示例所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。