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 (
<View style={styles.container}>
<Text onPress={()=>{this.props.navigation.navigate('home')}}>去主页
</Text>
</View>
);
}
}
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(
<Image source={require('../assets/message.png')} style={{
width:25,height:25
}}></Image>
)
}else{
return(
<Image source={require('../assets/unmessage.jpeg')} style={{
width:25,height:25
}}></Image>
)
}
}
}
},
me:{
screen:MeScreen,
navigationOptions:{
tabBarIcon:({focused})=>{
if(focused){
return(
<Image source={require('../assets/mine.jpg')} style={{
width:15,height:15
}}></Image>
)
}else{
return(
<Image source={require('../assets/unmine.jpg')} style={{
width:15,height:15
}}></Image>
)
}
}
}
},
},
{
tabBarOptions: {
//当前选中的tab bar的文本颜色和图标颜色
activeTintColor: '#4BC1D2',
//当前未选中的tab bar的文本颜色和图标颜色
inactiveTintColor: '#000',
//是否显示tab bar的图标，默认是false
showIcon: true,
//showLabel - 是否显示tab bar的文本，默认是true
showLabel: true,
//是否将文本转换为大小，默认是true
upperCaseLabel: false,
//material design中的波纹颜色(仅支持Android >= 5.0)
pressColor: '#788493',
//按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
pressOpacity: 0.8,
//tab bar的样式
style: {
backgroundColor: '#fff',
paddingBottom: 1,
borderTopWidth: 0.2,
paddingTop:1,
borderTopColor: '#ccc',
},
//tab bar的文本样式
labelStyle: {
fontSize: 11,
margin: 1
},
//tab 页指示符的样式 (tab页下面的一条线).
indicatorStyle: {height: 0},
},
//tab bar的位置, 可选值： 'top' or 'bottom'
tabBarPosition: 'bottom',
//是否允许滑动切换tab页
swipeEnabled: true,
//是否在切换tab页时使用动画
animationEnabled: false,
//是否懒加载
lazy: true,
//返回按钮是否会导致tab切换到初始tab页？ 如果是，则设置为initialRoute，否则为none。 缺省为initialRoute。
backBehavior: 'none',
}
);
export default createAppContainer(MainStack);
mainScrren、meScreen、detailScreen与loginScreen类似，就不一一重复。
loginScreen与mainScreen 跳转使用
<Text onPress={()=>{this.props.navigation.navigate('home')}}>去主页
mainScreen与detailScreen传值跳转:
//mainScrren.js
<Text onPress={()=>{this.props.navigation.navigate('detail',{
name:'marongting',
callBack:(backdata)=>{
Alert.alert(backdata);
}
})}}>to detail</Text>
//detailScreen.js
import {get} from 'lodash';
const {state} = this.props.navigation;
let name = get(state,'params.name');
<Text>hello,{name}</Text>
<Text onPress={()=>{this.props.navigation.state.params.callBack('我很好')}}>回调函数</Text>
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(
<View style={styles.container}>
<TouchableOpacity
onPress={() => {
this.props.navigation.openDrawer();
}}
>
<Text >侧栏</Text>
</TouchableOpacity>
<Text style={styles.text}>首页</Text>
</View>
)
}
}
AppInfoScreen和Setting与DrawMainScreen类似。
好啦，这样简单的导航就实现啦。
完整项目demo见gitHub react-Navigation
