1.引入第三方库:
yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
切记切记：3.0以上需要引用react-native-gesture-handler库！！！否则createStackNavigator一定报错（都是血泪史）...还有，navigator导出时一定要包裹createAppContainer....都是坑啊
2.先浏览一下效果吧
导航1.gif
导航2.gif
3.导航1本人是以RootNavigator为跟导航的，流程如下：
//RooterNavigator
import {createAppContainer,createStackNavigator} from 'react-navigation';
import LoginScreen from './LoginScreen';
import MainNavigator from './MainNavigator';
import DetailScreen from './DetailScreen';
const navigator = createStackNavigator({
ligin:{
screen: LoginScreen,
},
home:{
screen:MainNavigator,
navigationOptions: ({navigation}) => ({
header: null //设置页面有无标题
})
},
detail:{
screen:DetailScreen,
}
});
export default createAppContainer(navigator);
LoginScreen是一个简单的rn页面：
//LoginScreen.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export default class LoginScreen extends Component{
static navigationOptions={
title:'Login'
}
render() {
return (
{this.props.navigation.navigate('home')}}>去主页
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
RootNavigator里面包含着另外一个BottomNavigator,
//MainNavigator
import React, {Component} from 'react';
import {Text, View,Image} from 'react-native';
import {createBottomTabNavigator,createAppContainer,createStackNavigator} from 'react-navigation';
import MainScreen from './MainScreen';
import MeScreen from './MeScreen';
const MainStack = createBottomTabNavigator({
home:{
screen:MainScreen,
navigationOptions:{
tabBarIcon:({focused})=>{
if(focused){
return(
mainScrren、meScreen、detailScreen与loginScreen类似，就不一一重复。
loginScreen与mainScreen 跳转使用
{this.props.navigation.navigate('home')}}>去主页
mainScreen与detailScreen传值跳转:
//mainScrren.js
{this.props.navigation.navigate('detail',{
name:'marongting',
callBack:(backdata)=>{
Alert.alert(backdata);
}
})}}>to detail
//detailScreen.js
import {get} from 'lodash';
const {state} = this.props.navigation;
let name = get(state,'params.name');
hello,{name}
{this.props.navigation.state.params.callBack('我很好')}}>回调函数
4.抽屉导航是单独拿出来的，已createDrawerNavigator为根导航
//createDrawerNavigator
import React from 'react';
import {
StyleSheet,
View,
Button,
Text,
Image
} from 'react-native';
import {createDrawerNavigator,createAppContainer} from 'react-navigation';
import AppInfoScreen from './AppInfoScreen';
import Setting from './setting';
import DrawMainScreen from './DrawMainScreen';
//this.props.navigation.openDrawer();//打开抽屉
//this.props.navigation.closeDrawer();//关闭抽屉
export default createAppContainer(
createDrawerNavigator({
AppInfo: {
screen: AppInfoScreen
},
Main: {
screen: DrawMainScreen
},
Set: {
screen: Setting
},
}, {
order: ['AppInfo', 'Set', 'Main'],//routeNames数组，用于定义抽屉项目的顺序。
initialRouteName: 'Main',//初始路由的routeName。
drawerLockMode: 'unlocked',//设置是否响应手势
//'unlocked' 可以通过手势和代码 打开关闭抽屉
//'locked-closed' 抽屉关闭状态 不能通过手势打开 只能通过代码实现
//'locked-open' 抽屉打开状态 不能通过手势关闭 只能通过代码实现
drawerWidth: 250, //抽屉的宽度或返回的功能。
drawerPosition: 'left', //选项是left或right。默认是left位置。
useNativeAnimations: false, //启用原生动画。默认是true。
drawerBackgroundColor: 'white', //使用抽屉背景获取某种颜色。默认是white。
//用于呈现抽屉内容的组件，例如导航项。收到navigation抽屉的道具。默认为DrawerItems
//用于自定义
//contentComponent: '',
//配置抽屉内容 items相关
contentOptions: {
// items: [OtherScreen],//可以修改或覆盖路由数组 不知道干嘛用的
// activeItemKey: 'AppInfo', //识别活动路线的关键 也不知道干嘛用的
activeTintColor: 'white', //活动标签的标签和图标颜色
activeBackgroundColor: 'blue', //活动标签的背景颜色
inactiveTintColor: 'black', //非活动标签的标签和图标颜色
inactiveBackgroundColor: 'red', //非活动标签的背景颜色
// //按下项目时要调用的函数 不知道是否使用错误 一直没反应
//github上面有答案 在自定义视图的时候 会有用
// onItemPress(route) {
// console.log('onItemPress'+route);
// },
// itemsContainerStyle: '', //内容部分的样式对象
// itemStyle: '', //单个项目的样式对象，可以包含图标和 / 或标签
// labelStyle: '', //Text当标签是字符串时，样式对象在内容部分内覆盖样式
// activeLabelStyle: '', //Text当标签是字符串（与之合并labelStyle）时，样式对象覆盖活动标签的样式
// inactiveLabelStyle: '', //Text当标签是字符串（与之合并labelStyle）时，样式对象覆盖非活动标签的样式
// iconContainerStyle: '', //样式对象以覆盖View图标容器样式。
}
})
)
DrawMainScreen如下：
//drawMainScreen.js
import React,{Component} from 'react';
import {
StyleSheet,
View,
Button,
Text,
Image,
TouchableOpacity
} from 'react-native';
export default class DrawMainScreen extends Component{
render(){
return(
{
this.props.navigation.openDrawer();
}}
>
侧栏
首页
)
}
}
AppInfoScreen和Setting与DrawMainScreen类似。
好啦，这样简单的导航就实现啦。
完整项目demo见gitHub react-Navigation