看了官方文档的导航器对比，发现现在主推的方案是一个单独的导航库react-navigation，据说它的使用十分简单。我就写个demo，试了一下。
一、主要构成
按使用形式主要分三部分:
- StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
- TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏
- DrawerNavigator: 抽屉效果，侧边滑出
二、使用
1.新建项目
2. 在应用中安装此库
安装完发现是beta版本(v1.0.0-beta.7) ，竟然有坑?！一会儿我们会详细说这个坑~
3.测试TabNavigator、StackNavigator和DrawerNavigator
（1）新建HomePage.js
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 (
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
static navigationOptions = {
title:'聊天',};
render() {
const {params} = this.props.navigation.state;
return (
<View style={{backgroundColor:'#fff',flex:1}}>
</View>
);}
}
export default ChatScreen;
（3）新建MinePage.js
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}}>
（4）编写MyNotificationsScreen.js
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="返回我的界面"
/>
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，可以阅读这一篇英文的入门文档，希望对你们有所帮助~
原文链接：https://www.f2er.com/js/32446.html