看了官方文檔的導航器對比，發(fā)現(xiàn)現(xiàn)在主推的方案是一個單獨的導航庫react-navigation镊辕，據(jù)說它的使用十分簡單油够。我就寫個demo，試了一下征懈。
一石咬、主要構成
按使用形式主要分三部分:
1 StackNavigator: 類似于普通的Navigator，屏幕上方導航欄
2 TabNavigator: 相當于ios里面的TabBarController卖哎，屏幕下方的標簽欄
3 DrawerNavigator: 抽屜效果鬼悠，側邊滑出
二、使用
1.新建項目
react-native init ComponentDemo
2. 在應用中安裝此庫
npm install --save react-navigation
安裝完發(fā)現(xiàn)是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：遺憾的是這個錯誤我沒有留圖啊~在我即將發(fā)表這篇文章的時候客给，最新版已經變?yōu)?v1.0.0-beta.9)了，最新版已經將上述的bug修改了肢簿！
好了靶剑，再次運行~
上一個動態(tài)效果圖：
QQ20170427-155140.gif
想詳細了解React Navigation，可以閱讀這一篇英文的入門文檔译仗，希望對你們有所幫助~
