上篇博客和大家分享了關於React Native jsBundle預加載，界面啟動優化的內容，詳情可點擊：
基於最新版本React Native實現JsBundle預加載，界面秒開優化
一、開源庫介紹
今年1月份，新開源的react-natvigation庫備受矚目。在短短不到3個月的時間，github上星數已達4000+。Fb推薦使用庫，並且在React Native當前最新版本0.44中將Navigator刪除。react-navigation據稱有原生般的性能體驗效果。可能會成為未來React Native導航組件的主流軍。本篇內容基於【 ^1.0.0-beta.9 】版本來介紹關於該庫的使用和實戰技巧。可以看到，雖然是beta版本，不過基本穩定，大家可放心在項目中使用。奉上 react-navigation 官方文檔
該庫包含三類組件：
（1）StackNavigator：用來跳轉頁面和傳遞參數
（2）TabNavigator：類似底部導航欄，用來在同一屏幕下切換不同界面
（3）DrawerNavigator：側滑菜單導航欄，用於輕松設置帶抽屜導航的屏幕
二、react-navigation使用
具體內容大致分為如下：
（1）react-navigation庫屬性介紹
（2）StackNavigator、TabNavigator實現界面間跳轉，Tab切換
（3）StackNavigator界面間跳轉、傳值、取值
（4）DrawerNavigator實現抽屜導航菜單
（5）DrawerNavigator擴展功能
（6）自定義react-navigation
1、StackNavigator屬性介紹
navigationOptions：配置StackNavigator的一些屬性。
title：標題，如果設置了這個導航欄和標簽欄的title就會變成一樣的，不推薦使用
header：可以設置一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設置為null
headerTitle：設置導航欄標題，推薦
headerBackTitle：設置跳轉頁面左側返回箭頭后面的文字，默認是上一個頁面的標題。可以自定義，也可以設置為null
headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭后的文字時，默認改成"返回"
headerRight：設置導航條右側。可以是按鈕或者其他視圖控件
headerLeft：設置導航條左側。可以是按鈕或者其他視圖控件
headerStyle：設置導航條的樣式。背景色，寬高等
headerTitleStyle：設置導航欄文字樣式
headerBackTitleStyle：設置導航欄‘返回’文字樣式
headerTintColor：設置導航欄顏色
headerPressColorAndroid：安卓獨有的設置顏色紋理，需要安卓版本大於5.0
gesturesEnabled：是否支持滑動返回手勢，iOS默認支持，安卓默認關閉
screen：對應界面名稱，需要填入import之后的頁面
mode：定義跳轉風格
card：使用iOS和安卓默認的風格
modal：iOS獨有的使屏幕從底部畫出。類似iOS的present效果
headerMode：返回上級頁面時動畫效果
float：iOS默認的效果
screen：滑動過程中，整個頁面都會返回
none：無動畫
cardStyle：自定義設置跳轉效果
transitionConfig： 自定義設置滑動返回的配置
onTransitionStart：當轉換動畫即將開始時被調用的功能
onTransitionEnd：當轉換動畫完成，將被調用的功能
path：路由中設置的路徑的覆蓋映射配置
initialRouteName：設置默認的頁面組件，必須是上面已注冊的頁面組件
initialRouteParams：初始路由參數
注：大家可能對於path不太理解。path屬性適用於其他app或瀏覽器使用url打開本app並進入指定頁面。path屬性用於聲明一個界面路徑，例如：【/pages/Home】。此時我們可以在手機瀏覽器中輸入：app名稱://pages/Home來啟動該App，並進入Home界面。
2、TabNavigator屬性介紹
screen：和導航的功能是一樣的，對應界面名稱，可以在其他頁面通過這個screen傳值和跳轉。
navigationOptions：配置TabNavigator的一些屬性
title：標題，會同時設置導航條和標簽欄的title
tabBarVisible：是否隱藏標簽欄。默認不隱藏(true)
tabBarIcon：設置標簽欄的圖標。需要給每個都設置
tabBarLabel：設置標簽欄的title。推薦
導航欄配置
tabBarPosition：設置tabbar的位置，iOS默認在底部，安卓默認在頂部。（屬性值：'top'，'bottom'）
swipeEnabled：是否允許在標簽之間進行滑動
animationEnabled：是否在更改標簽時顯示動畫
lazy：是否根據需要懶惰呈現標簽，而不是提前，意思是在app打開的時候將底部標簽欄全部加載，默認false,推薦為true
trueinitialRouteName： 設置默認的頁面組件
backBehavior：按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉
tabBarOptions：配置標簽欄的一些屬性iOS屬性
activeTintColor：label和icon的前景色 活躍狀態下
activeBackgroundColor：label和icon的背景色 活躍狀態下
inactiveTintColor：label和icon的前景色 不活躍狀態下
inactiveBackgroundColor：label和icon的背景色 不活躍狀態下
showLabel：是否顯示label，默認開啟 style：tabbar的樣式
labelStyle：label的樣式安卓屬性
activeTintColor：label和icon的前景色 活躍狀態下
inactiveTintColor：label和icon的前景色 不活躍狀態下
showIcon：是否顯示圖標，默認關閉
showLabel：是否顯示label，默認開啟 style：tabbar的樣式
labelStyle：label的樣式 upperCaseLabel：是否使標簽大寫，默認為true
pressColor：material漣漪效果的顏色（安卓版本需要大於5.0）
pressOpacity：按壓標簽的透明度變化（安卓版本需要小於5.0）
scrollEnabled：是否啟用可滾動選項卡 tabStyle：tab的樣式
indicatorStyle：標簽指示器的樣式對象（選項卡底部的行）。安卓底部會多出一條線，可以將height設置為0來暫時解決這個問題
labelStyle：label的樣式
iconStyle：圖標樣式
3、DrawerNavigator屬性介紹
DrawerNavigatorConfig
drawerWidth - 抽屜的寬度
drawerPosition - 選項是左或右。 默認為左側位置
contentComponent - 用於呈現抽屜內容的組件，例如導航項。 接收抽屜的導航。 默認為DrawerItems
contentOptions - 配置抽屜內容
initialRouteName - 初始路由的routeName
order - 定義抽屜項目順序的routeNames數組。
路徑 - 提供routeName到路徑配置的映射，它覆蓋routeConfigs中設置的路徑。
backBehavior - 后退按鈕是否會切換到初始路由？ 如果是，設置為initialRoute，否則為none。 默認為initialRoute行為
DrawerItems的contentOptions屬性
activeTintColor - 活動標簽的標簽和圖標顏色
activeBackgroundColor - 活動標簽的背景顏色
inactiveTintColor - 非活動標簽的標簽和圖標顏色
inactiveBackgroundColor - 非活動標簽的背景顏色
內容部分的樣式樣式對象
labelStyle - 當您的標簽是字符串時，要覆蓋內容部分中的文本樣式的樣式對象
從上述中大致了解了react-navigation三種組件的一些基本屬性，所以到我們甩起袖子擼代碼見證下奇跡了。
4、使用StackNavigator + TabNavigator實現Tab界面切換、界面間導航
API定義：StackNavigator(RouteConfigs, StackNavigatorConfig)、TabNavigator(RouteConfigs, TabNavigatorConfig)
（1）集成 react-navigation：在終端執行 【 npm install react-navigation --save 】
（2）界面中導入必要組件：
import {StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation';
import HomeScreen from './pages/HomePage';
import MineScreen from './pages/MinePage';
（3）定義TabNavigator：
const Tab = TabNavigator( { Home:{ screen:HomeScreen, navigationOptions:({navigation}) => ({ tabBarLabel:'首頁', tabBarIcon:({focused,tintColor}) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./imgs/nav_fav@2x.png')} selectedImage={require('./imgs/nav_fav_actived@3x.png')} /> ) }), }, Mine:{ screen:MineScreen, navigationOptions:({navigation}) => ({ tabBarLabel:'我', tabBarIcon:({focused,tintColor}) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./imgs/tab_me_nor@3x.png')} selectedImage={require('./imgs/tab_me_selected@2x.png')} /> ) }), }, }, { tabBarComponent:TabBarBottom, tabBarPosition:'bottom', swipeEnabled:false, animationEnabled:false, lazy:true, tabBarOptions:{ activeTintColor:'#06c1ae', inactiveTintColor:'#979797', style:{backgroundColor:'#ffffff',}, labelStyle: { fontSize: 20, // 文字大小 }, } } );
TabBarItem為封裝的組件：
import React,{Component} from 'react'; import {Image} from 'react-native'; export default class TabBarItem extends Component { render() { return( <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage } style={ { tintColor:this.props.tintColor,width:25,height:25 } } /> ) } }
可以看到，我們定義了一個名稱為【Tab】的TabNavigator的導航組件。在組件中，分為兩層參數：
（1）第一層參數定義了要切換的界面，即【首頁】、【我】兩個界面組件，通過screen屬性指定。並且通過navigationOptions屬性設置相關屬性參數。
（2）設置導航欄的屬性參數。
TabNavigator定義好之后，需要用StackNavigator，顧名思義，StackNavigator就是以棧的方式來存放整個界面的，而TabNavigator是作為一個界面內不同子界面之間切換。所以還需要我們定義StackNavigator：
const Navigator = StackNavigator(
{
Tab:{screen:Tab},
Product:{screen:ProductScreen}
},
{
navigationOptions:{
headerBackTitle:null,
headerTintColor:'#333333',
showIcon:true,
swipeEnabled:false,
animationEnabled:false,
},
mode:'card',
});
看起來和TabNavigator很相似，同樣是指定了兩個參數：
（1）指定要跳轉的界面組件。同樣是screen屬性標識界面組件，不多贅述。
（2）定義跳轉屬性參數，即頂部導航欄的一些參數設置和跳轉方式。
可以看到，我們將Tab作為一個界面設置到了StackNavigator。這樣就可以實現Tab導航和界面間跳轉的效果了。
最后就是在render中引用StackNavigator：
export default class Demo extends Component { render() { return ( <Navigator /> ); } }
StackNavigator還提供了onNavigationStateChange回調方法，用來監聽導航狀態的改變。具體不再贅述。實現了界面跳轉和切換，那么就該來增加下界面之間的感情了，來看看如何實現界面之間的傳值和取值。
5、界面間跳轉、傳值、取值
在界面組件注入到StackNavigator中時，界面組件就被賦予了navigation屬性，即在界面組件中可以通過【this.props.navigation】獲取並進行一些操作。
navigation屬性中提供了很多的函數簡化界面間操作，簡單列舉幾點：
（1）通過navigate函數實現界面之間跳轉：
this.props.navigation.navigate('Mine');
參數為我們在StackNavigator注冊界面組件時的名稱。同樣也可以從當前頁面返回到上一頁：
// 返回上一頁
this.props.navigation.goBack();
（2）跳轉時傳值：
this.props.navigation.navigate('Mine',{info:'傳值過去'});
第一個參數同樣為要跳轉的界面組件名稱，第二個參數為要傳遞的參數，info可以理解為key，后面即傳遞的參數。
（3）獲取值：
{this.props.navigation.state.params.info}
通過state.params來獲取傳來的參數，后面為key值。此處為info。
以上實現完成，我們就可以愉快的玩耍啦~~ 什么？忽然發現在Android上的效果和IOS效果不一樣。老板要界面一致哇~ 怎么辦？那就需要我們進行簡單的適配了。
三、DrawerNavigator實現抽屜導航
1、導航實現
API定義：DrawerNavigator（RouteConfigs，DrawerNavigatorConfig）
（1）界面中定義DrawerNavigator：
import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-navigation'; import HomeScreen from './pages/HomePage'; import MineScreen from './pages/MinePage'; export default class Demo extends Component { render() { return ( <Navigator /> ); } } const Navigator = DrawerNavigator({ Home:{screen:HomeScreen}, Mine:{screen:MineScreen}, }); const styles = StyleSheet.create({ container: { flex: 1, }, }); AppRegistry.registerComponent('Demo', () => Demo);
定義方式和StackNavigator基本類似，不再贅述。
（2）HomeScreen界面和MineScreen界面：
export default class HomePage extends Component { static navigationOptions = { drawerLabel: '首頁', drawerIcon:({tintColor}) => ( <Image source={require('./../imgs/ic_happy.png')} style={[styles.icon, {tintColor: tintColor}]}/> ), }; render() { return( <View style={{flex:1}}> <Text onPress={this._skip.bind(this)}>點擊跳轉</Text> </View> ); } _skip() { this.props.navigation.navigate("Mine"); } } export default class MinePage extends Component { static navigationOptions = { drawerLabel:'我', drawerIcon: ({ tintColor }) => ( <Image source={require('./../imgs/ic_h.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; render() { return( <View style={{flex:1}}> <Text onPress={this._skip.bind(this)}>返回上一界面</Text> </View> ); } /** * 跳轉 */ _skip() { this.props.navigation.goBack(); } }
代碼很簡單，實現了界面之間的跳轉。
2、擴展功能
（1）默認DrawerView不可滾動。要實現可滾動視圖，必須使用contentComponent自定義容器，如下所示：
{ drawerWidth：200， 抽屜位置：“對” contentComponent：props => <ScrollView> <DrawerItems {... props} /> </ ScrollView> }
（2）可以覆蓋導航使用的默認組件，使用DrawerItems自定義導航組件：
import {DrawerItems} from 'react-navigation'; const CustomDrawerContentComponent = (props) => ( <View style = {style.container}> <DrawerItems {... props} /> </View> );
（3）嵌套抽屜導航
如果您嵌套DrawerNavigation，抽屜將顯示在父導航下方。
四、自定義react-navigation
（1）適配頂部導航欄標題：
測試中發現，在iphone上標題欄的標題為居中狀態，而在Android上則是居左對齊。所以需要我們修改源碼，進行適配。
【node_modules -- react-navigation -- src -- views -- Header.js】的326行代碼處，修改為如下：
title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: 'center',
}
上面方法通過修改源碼的方式其實略有弊端，畢竟擴展性不好。還有另外一種方式就是，在navigationOptions中設置headerTitleStyle的alignSelf為 ' center '即可解決。
（2）去除返回鍵文字顯示：
【node_modules -- react-navigation -- src -- views -- HeaderBackButton.js】的91行代碼處，修改為如下即可。
{Platform.OS === 'ios' && title && <Text onLayout={this._onTextLayout} style={[styles.title, { color: tintColor }]} numberOfLines={1} > {backButtonTitle} </Text>}
將上述代碼刪除即可。
（3）動態設置頭部按鈕事件：
當我們在頭部設置左右按鈕時，肯定避免不了要設置按鈕的單擊事件，但是此時會有一個問題，navigationOptions是被修飾為static類型的，所以我們在按鈕的onPress的方法中不能直接通過this來調用Component中的方法。如何解決呢？在官方文檔中，作者給出利用設置params的思想來動態設置頭部標題。那么我們可以利用這種方式，將單擊回調函數以參數的方式傳遞到params，然后在navigationOption中利用navigation來取出設置到onPress即可：
componentDidMount () {
/**
* 將單擊回調函數作為參數傳遞
*/
this.props.navigation.setParams({
switch: () => this.switchView()
});
}
/**
* 切換視圖
*/
switchView() {
alert('切換')
}
static navigationOptions = ({navigation,screenProps}) => ({ headerTitle: '企業服務', headerTitleStyle: CommonStyles.headerTitleStyle, headerRight: ( <NavigatorItem icon={ Images.ic_navigator } onPress={ ()=> navigation.state.params.switch() }/> ), headerStyle: CommonStyles.headerStyle });
（4）結合BackHandler處理返回和點擊返回鍵兩次退出App效果
點擊返回鍵兩次退出App效果的需求屢見不鮮。相信很多人在react-navigation下實現該功能都遇到了很多問題，例如，其他界面不能返回。也就是手機本身返回事件在react-navigation之前攔截了。如何結合react-natigation實現呢？和大家分享兩種實現方式：
（1）在注冊StackNavigator的界面中，注冊BackHandler：
componentWillMount(){ BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid ); } componentUnWillMount(){ BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid); } _onBackAndroid=()=>{ let now = new Date().getTime(); if(now - lastBackPressed < 2500) { return false; } lastBackPressed = now; ToastAndroid.show('再點擊一次退出應用',ToastAndroid.SHORT); return true; }
（2）監聽react-navigation的Router
/** * 處理安卓返回鍵 */ const defaultStateAction = AppNavigator.router.getStateForAction; AppNavigator.router.getStateForAction = (action,state) => { if(state && action.type === NavigationActions.BACK && state.routes.length === 1) { if (lastBackPressed + 2000 < Date.now()) { ToastAndroid.show(Constant.hint_exit,ToastAndroid.SHORT); lastBackPressed = Date.now(); const routes = [...state.routes]; return { ...state, ...state.routes, index: routes.length - 1, }; } } return defaultStateAction(action,state); };
（5）實現Android中界面跳轉左右切換動畫
react-navigation在Android中默認的界面切換動畫是上下。如何實現左右切換呢？很簡單的配置即可：
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
然后在StackNavigator的配置下添加如下代碼：
transitionConfig:()=>({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
})
（6）解決快速點擊多次跳轉
當我們快速點擊跳轉時，會開啟多個重復的界面，如何解決呢。其實在官方git中也有提示，解決這個問題需要修改react-navigation源碼：
找到scr文件夾中的addNavigationHelpers.js文件,替換為如下文本即可：
export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) { // 添加點擊判斷 let debounce = true; return { ...navigation, goBack: (key?: ?string): boolean => navigation.dispatch( NavigationActions.back({ key: key === undefined ? navigation.state.key : key, }), ), navigate: (routeName: string, params?: NavigationParams, action?: NavigationAction,): boolean => { if (debounce) { debounce = false; navigation.dispatch( NavigationActions.navigate({ routeName, params, action, }), ); setTimeout( () => { debounce = true; }, 500, ); return true; } return false; }, /** * For updating current route params. For example the nav bar title and * buttons are based on the route params. * This means `setParams` can be used to update nav bar for example. */ setParams: (params: NavigationParams): boolean => navigation.dispatch( NavigationActions.setParams({ params, key: navigation.state.key, }), ), }; }
五、效果圖
抽屜導航：
