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

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

一、主要构成

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

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

二、使用

1.新建项目

react-native init ComponentDemo

2. 在应用中安装此库

npm install --save react-navigation

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

3.测试TabNavigator、StackNavigator和DrawerNavigator

（1）新建HomePage.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 (
 <View style={styles.container}>
 <Text style={{padding:10}}>Hello, Navigation!</Text>
 <Button
 onPress={() => navigate('Chat',{user:'Sybil'})}
 title="点击跳转"/>
 </View>
 )
 }
}
const MainScreenNavigator = TabNavigator({
 Home: {
 screen: HomePage,
 navigationOptions: {
 tabBar: {
 label: '首页',
 icon: ({tintColor}) => (
 <Image
 source={require('./image/bar_home_nomarl@3x.png')}
 style={[{tintColor: tintColor},styles.icon]}
 />
 ),
 },
 }
 },
 Certificate: {
 screen: MinePage,
 navigationOptions: {
 tabBar: {
 label: '我的',
 icon: ({tintColor}) => (
 <Image
 source={require('./image/bar_center_normal@3x.png')}
 style={[{tintColor: tintColor},styles.icon]}
 />
 ),
 },
 }
 },
}, {
 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

import React from 'react';
import {
 Button,
 Image,
 View,
 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}}>
 <Text style={{padding:20}}>Chat with {params.user}</Text>

 </View>

 );
 }
}
export default ChatScreen;

（3）新建MinePage.js

import React,{Component} from 'react';
import {
 Button,
 Image,
 View,
 Text,
 StyleSheet
} from 'react-native';

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/chat@3x.png')}
 style={[styles.icon, {tintColor: tintColor}]}
 />
 ),
 };
 render(){;
 return(
 <View style={{backgroundColor:'#fff',flex:1}}>
 <Text style={{padding:20}}>Sybil</Text>
 <Button
 style={{padding:20}}
 onPress={() => this.props.navigation.navigate('DrawerOpen')}
 title="点击打开侧滑菜单"
 />
 </View>
 );
 }
}

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

import React from 'react';
import {
 StyleSheet,
 View,
 Text,
 Button,
 Image
} from 'react-native';

class MyNotificationsScreen extends React.Component {
 static navigationOptions = {
 title:'通知',
 drawerLabel: '通知',
 drawerIcon: ({ tintColor }) => (
 <Image
 source={require('./image/notif@3x.png')}
 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="返回我的界面"
 />
 </View>
 );
 }
}

const styles = StyleSheet.create({
 tabIcon: {
 width: 24,
 height: 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，可以阅读这一篇英文的入门文档，希望对你们有所帮助~

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