react-native 项目集成react-navigation3.x

很多刚刚接触React Native开发的小伙伴，都会有使用跳转页面的需求，在web中可以使用localtion.href来跳转，但在 react-navigation 中，需要使用导航器跳转页面 ，react-navigation 组件是 React Native 今后主推的一个组件，下面详细介绍如何集成 react-navigation3.x， react-navigation github地址。
1.新建 react native 项目 创建过程省略。
创建成功之后，package.json 结构

“name”: “untitled”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”,
“test”: “jest”
},
“dependencies”: {
“react”: “16.8.3”,
“react-native”: “0.59.9”
},
“devDependencies”: {
“@babel/core”: “^7.4.5”,
“@babel/runtime”: “^7.4.5”,
“babel-jest”: “^24.8.0”,
“jest”: “^24.8.0”,
“metro-react-native-babel-preset”: “^0.54.1”,
“react-test-renderer”: “16.8.3”
},
“jest”: {
“preset”: “react-native”
}

2.添加 react-navigation 组件，使用的是 react-navigation 3.11.0版本
使用 yarn add react-navigation 或 npm install react-navigation
添加成功之后， package.json 的 dependencies 结构

“dependencies”: {
“react”: “16.8.3”,
“react-native”: “0.59.9”,
“react-navigation”: “^3.11.0”
}

3.添加 react-native-gesture-handler 组件 ，react-navigation3.x 需要手动安装。
使用 yarn add react-native-gesture-handler 或 npm install yarn add react-native-gesture-handler
添加成功之后， package.json 的 dependencies 结构

“dependencies”: {
“react”: “16.8.3”,
“react-native”: “0.59.9”,
“react-native-gesture-handler”: “^1.3.0”,
“react-navigation”: “^3.11.0”
}

安装成功之后，别忘了 link

react-native link react-native-gesture-handler

4.新建 pages 文件夹 ,在 pages 下新建 routes.js文件

routes.js 代码如下:

import React from ‘react’;
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);

修改 index.js 文件:

import {AppRegistry} from ‘react-native’;
import Routes from ‘./pages/routes’;
import {name as appName} from ‘./app.json’;
AppRegistry.registerComponent(appName, () => Routes);

5.在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 (

这是A页面
<Button title={‘跳转B页面’} onPress={()=>navigate(“pageb”)}/>

);
} }

pagea.js文件中的 navigate(“pageb”)，完成跳转。

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 (

这是B页面
<Button title={‘跳转A页面’} onPress={()=>goBack()}/>

);
} }

goBack 返回上一页。
如有不清楚的， 可以私信或进行提问。