1.安装路由依赖react-navigation
npm install react-navigation@3.11.0
2.添加 react-native-gesture-handler 组件，成功后为：
3.安装成功之后，别忘了 link：
react-native link react-native-gesture-handler
4.新建 pages 文件夹 ,在 pages 下新建 routes.js文件
import {createStackNavigator,createAppContainer} from ‘react-navigation‘;
import Pagea from ‘./pagea‘; import Pageb from ‘./pageb‘;
const Routes=createStackNavigator({
pagea: {
screen: Pagea,
navigationOptions: () => ({
title:‘A页面‘
})
},
pageb:{
screen:Pageb,
navigationOptions:()=>({
title: ‘B页面‘
})
}
},{initialRouteName:‘pagea‘ });
export default createAppContainer(Routes);
5.修改 index.js 文件:
import {AppRegistry} from ‘react-native‘;
import Routes from ‘./pages/routes‘;
import {name as appName} from ‘./app.json‘;
AppRegistry.registerComponent(appName, () => Routes);
6.在pages文件夹下，新建 pagea.js和pageb.js
pagea.js 代码：
import React,{Component} from ‘react‘;
import {View,Text,Button} from ‘react-native‘;
export default class Pagea extends Component{
constructor(props){
super(props);
}
render(){
let {navigate}=this.props.navigation;
return (
<View>
<Text>这是A页面</Text>
<Button title={‘跳转B页面‘} onPress={()=>navigate(‘pageb‘)}/>
</View>
);
}
}
pageb.js 代码：
import React,{Component} from ‘react‘;
import {View,Text,Button} from ‘react-native‘;
export default class Pageb extends Component{
constructor(props){
super(props);
}
render(){
let {goBack}=this.props.navigation;
return (
<View>
<Text>这是B页面</Text>
<Button title={‘跳转A页面‘} onPress={()=>goBack()}/>
</View>
);
}
}
react-native学习笔记二====》配置路由（react-navigation3.x）
原文：https://www.cnblogs.com/miaSlady/p/12213035.html