看了官方文档的导航器对比，发现现在主推的方案是一个单独的导航库react-navigation，据说它的使用十分简单。我就写个demo，试了一下。
一、主要构成
按使用形式主要分三部分:
- StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
- TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏
- 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，可以阅读这一篇英文的入门文档，希望对你们有所帮助~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- React Native react-navigation 导航使用详解
- react-navigation 如何判断用户是否登录跳转到登录页的方法
- React Native中导航组件react-navigation跨tab路由处理详解
- React Native学习教程之自定义NavigationBar详解
- react-native使用react-navigation进行页面跳转导航的示例
- React Navigation 使用中遇到的问题小结
