这次给大家带来react-navigation使用案例解析，react-navigation使用的注意事项有哪些，下面就是实战案例，一起来看一下。
一、主要构成
按使用形式主要分三部分:
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修改了！
好了，再次运行~
上一个动态效果图：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用vue实现2048小游戏
如何使用veevalidate在vue项目内进行表单校验功能
以上就是react-navigation使用案例解析的详细内容。