官方推荐react-navigation的具体使用详解

看了官方文档的导航器对比，发现现在主推的方案是一个单独的导航库react-navigation，据说它的使用十分简单。我就写个demo，试了一下。

一、主要构成

按使用形式主要分三部分:

1. StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
2. TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏
3. DrawerNavigator: 抽屉效果，侧边滑出

二、使用

1.新建项目

rush:js;"> react-native init ComponentDemo

2. 在应用中安装此库

rush:bash;"> npm install --save react-navigation

安装完发现是beta版本(v1.0.0-beta.7) ，竟然有坑?！一会儿我们会详细说这个坑~

3.测试TabNavigator、StackNavigator和DrawerNavigator

（1）新建HomePage.js

rush:js;"> import React from 'react'; import { StyleSheet,View,Text,Button,Image } from 'react-native';

import {
StackNavigator,TabNavigator
} from 'react-navigation';

import ChatScreen from './ChatScreen';
import minePage from './minePage';

class HomePage extends React.Component{

static navigationoptions={
title: '首页',//设置标题内容
header:{
backTitle: ' ',//返回按钮标题内容（默认为上一级标题内容）
}
}

constructor(props) {
super(props);
}

render() {
const {navigate} = this.props.navigation;
return (

Hello,Navigation! navigate('Chat',{user:'Sybil'})} title="点击跳转"/> ) } } const MainScreenNavigator = TabNavigator({ Home: { screen: HomePage,navigationoptions: { tabBar: { label: '首页',icon: ({tintColor}) => ( ),},} },Certificate: { screen: minePage,navigationoptions: { tabBar: { label: '我的',icon: ({tintColor}) => ( [e-mail]')} style={[{tintColor: tintColor},{ animationEnabled: false,// 切换页面时不显示动画 tabBarPosition: 'bottom',// 显示在底端，android 默认是显示在页面顶端的 swipeEnabled: false,// 禁止左右滑动 backBehavior: 'none',// 按 back 键是否跳转到第一个 Tab， none 为不跳转 tabBarOptions: { activeTintColor: '#008AC9',// 文字和图片选中颜色 inactiveTintColor: '#999',// 文字和图片默认颜色 showIcon: true,// android 默认不显示 icon,需要设置为 true 才会显示 indicatorStyle: {height: 0},// android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了 style: { backgroundColor: '#fff',// TabBar 背景色 },labelStyle: { fontSize: 12,// 文字大小 },});

const styles = StyleSheet.create({
container:{
flex: 1,backgroundColor:'#fff'
},icon: {
height: 22,width: 22,resizeMode: 'contain'
}
});

const SimpleApp = StackNavigator({
Home: {screen: MainScreenNavigator},Chat:{screen:ChatScreen},});

export default SimpleApp;

（2）新建ChatScreen.js

rush:js;"> import React from 'react'; import { Button,Image,Text } from 'react-native';

class ChatScreen extends React.Component {
static navigationoptions = {
title:'聊天',};

render() {
const {params} = this.props.navigation.state;
return (
<View style={{backgroundColor:'#fff',flex:1}}>

Chat with {params.user}

</View>

);

}
}
export default ChatScreen;

（3）新建minePage.js

import {
DrawerNavigator
} from 'react-navigation';

import MyNotificationsScreen from './MyNotificationsScreen';

class MinePage extends Component{
static navigationOptions = {
title:'我的',drawerLabel: '我的',// Note: By default the icon is only shown on iOS. Search the showIcon option below.
drawerIcon: ({ tintColor }) => (
<Image
source={require('./image/[e-mail]')}
style={[styles.icon,{tintColor: tintColor}]}
/>
),};
render(){;
return(
<View style={{backgroundColor:'#fff',flex:1}}>

Sybil this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> ); } }

const styles = StyleSheet.create({
icon: {
width: 24,height: 24,});

const MyChatNavigator = DrawerNavigator({
MyChat: {
screen: minePage,Notifications: {
screen: MyNotificationsScreen,{
drawerWidth: 220,// 抽屉宽
drawerPosition: 'left',// 抽屉在左边还是右边
// contentComponent: CustomDrawerContentComponent,// 自定义抽屉组件
contentOptions: {
initialRouteName: minePage,// 默认页面组件
activeTintColor: '#008AC9',// 选中文字颜色
activeBackgroundColor: '#f5f5f5',// 选中背景颜色
inactiveTintColor: '#000',// 未选中文字颜色
inactiveBackgroundColor: '#fff',// 未选中背景颜色
style: { // 样式

}

}
});

export default MyChatNavigator;

（4）编写MyNotificationsScreen.js

class MyNotificationsScreen extends React.Component {
static navigationOptions = {
title:'通知',drawerLabel: '通知',drawerIcon: ({ tintColor }) => (
<Image
source={require('./image/[e-mail]')}
style={[styles.tabIcon,{tintColor: tintColor}]}
/>
),};

render() {
return (
<View style={{backgroundColor:'#fff'}}>
<Button
style={{padding:20}}
onPress={() => this.props.navigation.navigate('DrawerOpen')}
title="点击打开侧滑菜单"
/>
<Button
onPress={() => this.props.navigation.goBack()}
title="返回我的界面"
/>

); } }

const styles = StyleSheet.create({
tabIcon: {
width: 24,});

export default MyNotificationsScreen;

（5）运行

报错啦？这就是上面我们所说的坑~

什么原因呢？原来是测试版的bug，在目录中找到node_modules/react-navigation/src/views/Header.js的第12行，删除它就OK了~

Ps：遗憾的是这个错误我没有留图啊~在我即将发表这篇文章的时候，最新版已经变为(v1.0.0-beta.9)了，最新版已经将上述的bug修改了！

好了，再次运行~

上一个动态效果图：

想详细了解React Navigation，可以阅读这一篇英文的入门文档，希望对你们有所帮助~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。