記得之前使用react-native的時(shí)候?qū)Ш綑谑褂玫氖莕avigation 荤崇，iOS 下使用navigationIOS . 現(xiàn)在又要重新接觸React-Native ,自然要了解下有哪些變化。

下面就來(lái)看看 react-navigation 的使用

該類(lèi)庫(kù)包含三類(lèi)組件

(1). StackNavigator ：用來(lái)跳轉(zhuǎn)頁(yè)面和傳遞參數(shù)
(2).TabNavigator : 類(lèi)似底部導(dǎo)航欄潮针，用來(lái)在同一屏幕下切換不同界面
(3).DrawerNavigator : 側(cè)滑菜單導(dǎo)航欄术荤，用于輕松設(shè)置帶抽屜導(dǎo)航的屏幕

一、react-navigation 使用

具體內(nèi)容大致分為：

(1) react-navigation 庫(kù)屬性介紹
(2) StackNavigator每篷、 TabNavigator 實(shí)現(xiàn)界面簡(jiǎn)的跳轉(zhuǎn)喜每、Tab切換
(3) StackNavigator 界面簡(jiǎn)跳轉(zhuǎn)、傳值雳攘、取值
(4)DrawerNavigator 實(shí)現(xiàn)抽屜導(dǎo)航菜單
(5)DrawerNavigator 擴(kuò)展功能
(6)自定義react-navigation 

1. StackNavigator 屬性介紹

  navigationOptions：配置StackNavigator的一些屬性带兜。  
  
    title：標(biāo)題，如果設(shè)置了這個(gè)導(dǎo)航欄和標(biāo)簽欄的title就會(huì)變成一樣的吨灭，不推薦使用  
    header：可以設(shè)置一些導(dǎo)航的屬性刚照，如果隱藏頂部導(dǎo)航欄只要將這個(gè)屬性設(shè)置為null  
    headerTitle：設(shè)置導(dǎo)航欄標(biāo)題，推薦  
    headerBackTitle：設(shè)置跳轉(zhuǎn)頁(yè)面左側(cè)返回箭頭后面的文字喧兄，默認(rèn)是上一個(gè)頁(yè)面的標(biāo)題无畔。可以自定義吠冤，也可以設(shè)置為null  
    headerTruncatedBackTitle：設(shè)置當(dāng)上個(gè)頁(yè)面標(biāo)題不符合返回箭頭后的文字時(shí)浑彰，默認(rèn)改成"返回"  
    headerRight：設(shè)置導(dǎo)航條右側(cè)≌蓿可以是按鈕或者其他視圖控件  
    headerLeft：設(shè)置導(dǎo)航條左側(cè)郭变。可以是按鈕或者其他視圖控件  
    headerStyle：設(shè)置導(dǎo)航條的樣式涯保。背景色诉濒，寬高等  
    headerTitleStyle：設(shè)置導(dǎo)航欄文字樣式  
    headerBackTitleStyle：設(shè)置導(dǎo)航欄‘返回’文字樣式  
    headerTintColor：設(shè)置導(dǎo)航欄顏色  
    headerPressColorAndroid：安卓獨(dú)有的設(shè)置顏色紋理，需要安卓版本大于5.0  
    gesturesEnabled：是否支持滑動(dòng)返回手勢(shì)夕春，iOS默認(rèn)支持未荒，安卓默認(rèn)關(guān)閉  
   
  
screen：對(duì)應(yīng)界面名稱，需要填入import之后的頁(yè)面  
  
mode：定義跳轉(zhuǎn)風(fēng)格  
  
   card：使用iOS和安卓默認(rèn)的風(fēng)格  
  
   modal：iOS獨(dú)有的使屏幕從底部畫(huà)出及志。類(lèi)似iOS的present效果  
  
headerMode：返回上級(jí)頁(yè)面時(shí)動(dòng)畫(huà)效果  
  
   float：iOS默認(rèn)的效果  
  
   screen：滑動(dòng)過(guò)程中片排，整個(gè)頁(yè)面都會(huì)返回  
  
   none：無(wú)動(dòng)畫(huà)  
  
cardStyle：自定義設(shè)置跳轉(zhuǎn)效果  
  
   transitionConfig： 自定義設(shè)置滑動(dòng)返回的配置  
  
   onTransitionStart：當(dāng)轉(zhuǎn)換動(dòng)畫(huà)即將開(kāi)始時(shí)被調(diào)用的功能  
  
   onTransitionEnd：當(dāng)轉(zhuǎn)換動(dòng)畫(huà)完成寨腔，將被調(diào)用的功能  
  
path：路由中設(shè)置的路徑的覆蓋映射配置  
  
initialRouteName：設(shè)置默認(rèn)的頁(yè)面組件，必須是上面已注冊(cè)的頁(yè)面組件  
  
initialRouteParams：初始路由參數(shù)  

注：大家可能對(duì)于path不太理解率寡。path屬性適用于其他app或?yàn)g覽器使用url打開(kāi)本app并進(jìn)入指定頁(yè)面脆侮。path屬性用于聲明一個(gè)界面路徑，例如：【/pages/Home】勇劣。此時(shí)我們可以在手機(jī)瀏覽器中輸入：app名稱://pages/Home來(lái)啟動(dòng)該App，并進(jìn)入Home界面潭枣。

2. TabNavigator屬性介紹

screen：和導(dǎo)航的功能是一樣的比默，對(duì)應(yīng)界面名稱，可以在其他頁(yè)面通過(guò)這個(gè)screen傳值和跳轉(zhuǎn)盆犁。  
  
  
navigationOptions：配置TabNavigator的一些屬性  
  
title：標(biāo)題命咐，會(huì)同時(shí)設(shè)置導(dǎo)航條和標(biāo)簽欄的title  
  
tabBarVisible：是否隱藏標(biāo)簽欄。默認(rèn)不隱藏(true)  
  
tabBarIcon：設(shè)置標(biāo)簽欄的圖標(biāo)谐岁。需要給每個(gè)都設(shè)置  
  
tabBarLabel：設(shè)置標(biāo)簽欄的title醋奠。推薦  
  
導(dǎo)航欄配置  
 
tabBarComponent: 使用的標(biāo)簽欄（iOS 默認(rèn) TabBarBottom ，android 默認(rèn)TabBarTop） 
tabBarPosition：設(shè)置tabbar的位置伊佃，iOS默認(rèn)在底部窜司，安卓默認(rèn)在頂部。（屬性值：'top'航揉，'bottom'）  
  
swipeEnabled：是否允許在標(biāo)簽之間進(jìn)行滑動(dòng)  
  
animationEnabled：是否在更改標(biāo)簽時(shí)顯示動(dòng)畫(huà)  
  
lazy：是否根據(jù)需要懶惰呈現(xiàn)標(biāo)簽塞祈，而不是提前，意思是在app打開(kāi)的時(shí)候?qū)⒌撞繕?biāo)簽欄全部加載帅涂，默認(rèn)false,推薦為true  
  
trueinitialRouteName： 設(shè)置默認(rèn)的頁(yè)面組件  
  
backBehavior：按 back 鍵是否跳轉(zhuǎn)到第一個(gè)Tab(首頁(yè))议薪， none 為不跳轉(zhuǎn)  
  
tabBarOptions：配置標(biāo)簽欄的一些屬性iOS屬性  
  
activeTintColor：label和icon的前景色 活躍狀態(tài)下  
  
activeBackgroundColor：label和icon的背景色 活躍狀態(tài)下  
  
inactiveTintColor：label和icon的前景色 不活躍狀態(tài)下  
  
inactiveBackgroundColor：label和icon的背景色 不活躍狀態(tài)下  
  
showLabel：是否顯示label，默認(rèn)開(kāi)啟 style：tabbar的樣式  
  
labelStyle：label的樣式安卓屬性  
  
activeTintColor：label和icon的前景色 活躍狀態(tài)下  
  
inactiveTintColor：label和icon的前景色 不活躍狀態(tài)下  
  
showIcon：是否顯示圖標(biāo)媳友，默認(rèn)關(guān)閉  
  
showLabel：是否顯示label斯议，默認(rèn)開(kāi)啟 style：tabbar的樣式  
  
labelStyle：label的樣式 upperCaseLabel：是否使標(biāo)簽大寫(xiě)，默認(rèn)為true  
  
pressColor：material漣漪效果的顏色（安卓版本需要大于5.0）  
  
pressOpacity：按壓標(biāo)簽的透明度變化（安卓版本需要小于5.0）  
  
scrollEnabled：是否啟用可滾動(dòng)選項(xiàng)卡 tabStyle：tab的樣式  
  
indicatorStyle：標(biāo)簽指示器的樣式對(duì)象（選項(xiàng)卡底部的行）醇锚。安卓底部會(huì)多出一條線哼御，可以將height設(shè)置為0來(lái)暫時(shí)解決這個(gè)問(wèn)題  
  
labelStyle：label的樣式  
  
iconStyle：圖標(biāo)樣式  

3、DrawerNavigator屬性介紹

DrawerNavigatorConfig  
  
    drawerWidth - 抽屜的寬度  
    drawerPosition - 選項(xiàng)是左或右焊唬。 默認(rèn)為左側(cè)位置  
    contentComponent - 用于呈現(xiàn)抽屜內(nèi)容的組件艇搀，例如導(dǎo)航項(xiàng)。 接收抽屜的導(dǎo)航求晶。 默認(rèn)為DrawerItems  
    contentOptions - 配置抽屜內(nèi)容  
  
    initialRouteName - 初始路由的routeName  
    order - 定義抽屜項(xiàng)目順序的routeNames數(shù)組焰雕。  
    路徑 - 提供routeName到路徑配置的映射，它覆蓋routeConfigs中設(shè)置的路徑芳杏。  
    backBehavior - 后退按鈕是否會(huì)切換到初始路由矩屁？ 如果是辟宗，設(shè)置為initialRoute，否則為none吝秕。 默認(rèn)為initialRoute行為  
  
   DrawerItems的contentOptions屬性  
  
    activeTintColor - 活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色  
    activeBackgroundColor - 活動(dòng)標(biāo)簽的背景顏色  
    inactiveTintColor - 非活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色  
    inactiveBackgroundColor - 非活動(dòng)標(biāo)簽的背景顏色  
    內(nèi)容部分的樣式樣式對(duì)象  
    labelStyle - 當(dāng)您的標(biāo)簽是字符串時(shí)泊脐，要覆蓋內(nèi)容部分中的文本樣式的樣式對(duì)象  

3.使用StackNavigator + TabNavigator 實(shí)現(xiàn)Tab界面切換、界面間導(dǎo)航

API 定義： StackNavigation(RouteConfig,StackNavigatorConfig)烁峭、 TabNavigation(RouteConfigs容客、TabNavigatorConfig)

(1)集成react-navigation : 在終端執(zhí)行[npm i react-navigation --save]
(2) Router.js 界面中導(dǎo)入必要的組件,以及相關(guān)的寫(xiě)法

import React,{Component} from 'react';
import {
    StackNavigator,
} from 'react-navigation';

import { Home } from './Home/home';
import { App } from './App';
import Test  from './Test';
import { MainTab } from './MainTab';


// 初始化StackNavigator
export const  Routers = StackNavigator({
    // 將TabNavigator包裹在StackNavigator里面可以保證跳轉(zhuǎn)頁(yè)面的時(shí)候隱藏tabbar
    App:{
        screen:App,
    },
    MainTab:{
        screen:MainTab,
    },
    Home:{
      screen:Home,
    },
    Test:{
        screen:Test,
    }
},{

});

(3)定義Tab

import React,{ Component } from 'react';
import {
    View,
    Text,
    Platform,
} from 'react-native';

import { Home } from './Home/home';
import TestTow  from './Text2';
import TabBarItem from './TabBarItem'

import {StackNavigator, TabNavigator,TabBarBottom} from 'react-navigation';

export const MainTab = TabNavigator(
    {
        Home:{
            screen:Home,
            navigationOptions:({navigation}) => ({
            tabBarLabel:'首頁(yè)',
            labelStyle:{
                fontSize:10,
                color:'red'
            },
            activeTintColor:'red',
            activeBackgroundColor:'yellow',
            tabBarIcon:({focused,tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./images/login_password.png')}
                    selectedImage={require('./images/login_user.png')}
                />
          )
      }),
    },

    TestTow:{
        screen:TestTow,
            navigationOptions:({navigation}) => ({
            tabBarLabel:'我',
            tabBarIcon:({focused,tintColor}) => (
                  <TabBarItem
                  tintColor={tintColor}
                  focused={focused}
                  normalImage={require('./images/login_password.png')}
                  selectedImage={require('./images/login_user.png')}
              />
              )
            }),
          },
    },

    {
        tabBarComponent:TabBarBottom,
            tabBarPosition:'bottom',
        swipeEnabled:false, //不允許滑動(dòng)切換Tab
        animationEnabled:false,
        lazy:true,//允許懶加載
        tabBarOptions:{
          activeTintColor:'#06c1ae',
              inactiveTintColor:'#979797',
              style:{backgroundColor:'#ffffff',

            },
        labelStyle: {
            fontSize: 20, // 文字大小
        },
    }
  }
);

(4)下面來(lái)看看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 } }  
            />  
        )  
    }  
      
} 

(5)最后在入口文件中index.js

import { AppRegistry } from 'react-native';
import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {StackNavigator} from 'react-navigation';
import { Routers } from './Router';
import store from './Stores/store';



export default class Demo extends Component {

    render() {
        return (
            <Provider store={store}>
                <Routers screenProps={{themeColor:'rgb(45,158,163)',tinkColor:'white'}}/>
            </Provider>
        );
    }
}

AppRegistry.registerComponent('YDOA', () => Demo);

StackNavigator還提供了onNavigationStateChange回調(diào)方法，用來(lái)監(jiān)聽(tīng)導(dǎo)航狀態(tài)的改變约郁。具體不再贅述缩挑。實(shí)現(xiàn)了界面跳轉(zhuǎn)和切換，那么就該來(lái)增加下界面之間的感情了鬓梅，來(lái)看看如何實(shí)現(xiàn)界面之間的傳值和取值供置。

四、界面之間的跳轉(zhuǎn)和傳值

在界面組件注入到StackNavigator中時(shí)绽快，界面組件就被賦予了navigation屬性芥丧，即在界面組件中可以通過(guò)【this.props.navigation】獲取并進(jìn)行一些操作。
navigation屬性中提供了很多的函數(shù)簡(jiǎn)化界面間操作坊罢，簡(jiǎn)單列舉幾點(diǎn)：

(1)通過(guò)navigate函數(shù)實(shí)現(xiàn)界面之間跳轉(zhuǎn)：

this.props.navigation.navigate('Home');  

參數(shù)為我們?cè)赟tackNavigator注冊(cè)界面組件時(shí)的名稱续担。同樣也可以從當(dāng)前頁(yè)面返回到上一頁(yè)：

this.props.navigation.goBack();  

(2)、跳轉(zhuǎn)時(shí)傳值

this.props.navigation.navigate('Home',{info:'傳過(guò)去的值'});  

第一個(gè)參數(shù)同樣為要跳轉(zhuǎn)的界面組件名稱活孩，第二個(gè)參數(shù)為要傳遞的參數(shù)赤拒，info可以理解為key，后面即傳遞的參數(shù)诱鞠。

(3)獲取值：

{this.props.navigation.state.params.info}  

通過(guò)state.params來(lái)獲取傳來(lái)的參數(shù)

但是我們會(huì)發(fā)現(xiàn)iOS 上和Android 上效果不一樣挎挖。那我們就要進(jìn)行簡(jiǎn)單的適配了

image.png

Android 上默認(rèn)標(biāo)題是靠左的，那么怎樣讓它居中呢

在navigationOptions 中添加
 headerTitleStyle:{
                    alignSelf:'center',
                    },
 headerRight:<View></View>,

image.png

五航夺、DrawerNavigator 實(shí)現(xiàn)抽屜效果

1蕉朵、導(dǎo)航實(shí)現(xiàn)
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基本類(lèi)似

(2)HomeScreen界面和MineScreen界面：

export default class HomePage extends Component {  
  
    static navigationOptions = {  
        drawerLabel: '首頁(yè)',  
        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)}>點(diǎn)擊跳轉(zhuǎn)</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>  
        );  
    }  
  
    /**  
     * 跳轉(zhuǎn)  
     */  
    _skip() {  
        this.props.navigation.goBack();  
    }  
}  

代碼很簡(jiǎn)單，實(shí)現(xiàn)了界面之間的跳轉(zhuǎn)阳掐。

2始衅、擴(kuò)展功能
（1）默認(rèn)DrawerView不可滾動(dòng)。要實(shí)現(xiàn)可滾動(dòng)視圖缭保，必須使用contentComponent自定義容器汛闸，如下所示：

{  
  drawerWidth：200，  
  抽屜位置："對(duì)"
  contentComponent：props => <ScrollView> <DrawerItems {... props} /> </ ScrollView>  
}  

（2）可以覆蓋導(dǎo)航使用的默認(rèn)組件艺骂，使用DrawerItems自定義導(dǎo)航組件：

import {DrawerItems} from 'react-navigation';  
  
const CustomDrawerContentComponent = (props) => (  
  <View style = {style.container}>  
    <DrawerItems {... props} />  
  </View>    
);  

（3）嵌套抽屜導(dǎo)航
如果您嵌套DrawerNavigation诸老，抽屜將顯示在父導(dǎo)航下方。

六钳恕、自定義react-navigation

（1）適配頂部導(dǎo)航欄標(biāo)題：
測(cè)試中發(fā)現(xiàn)别伏，在iphone上標(biāo)題欄的標(biāo)題為居中狀態(tài)蹄衷，而在Android上則是居左對(duì)齊。所以需要我們修改源碼厘肮，進(jìn)行適配愧口。
【node_modules -- react-navigation -- src -- views -- Header.js】的326行代碼處，修改為如下：

title: {  
   bottom: 0,  
   left: TITLE_OFFSET,  
   right: TITLE_OFFSET,  
   top: 0,  
   position: 'absolute',  
   alignItems: 'center',  
 }  

上面方法通過(guò)修改源碼的方式其實(shí)略有弊端类茂，畢竟擴(kuò)展性不好耍属。還有另外一種方式就是，在navigationOptions中設(shè)置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）動(dòng)態(tài)設(shè)置頭部按鈕事件：
當(dāng)我們?cè)陬^部設(shè)置左右按鈕時(shí)，肯定避免不了要設(shè)置按鈕的單擊事件丑搔，但是此時(shí)會(huì)有一個(gè)問(wèn)題厦瓢，navigationOptions是被修飾為static類(lèi)型的，所以我們?cè)诎粹o的onPress的方法中不能直接通過(guò)this來(lái)調(diào)用Component中的方法啤月。如何解決呢煮仇？在官方文檔中，作者給出利用設(shè)置params的思想來(lái)動(dòng)態(tài)設(shè)置頭部標(biāo)題谎仲。那么我們可以利用這種方式浙垫，將單擊回調(diào)函數(shù)以參數(shù)的方式傳遞到params，然后在navigationOption中利用navigation來(lái)取出設(shè)置到onPress即可：

componentDidMount () {  
    /**  
     * 將單擊回調(diào)函數(shù)作為參數(shù)傳遞  
     */  
    this.props.navigation.setParams({  
            switch: () => this.switchView()  
    });  
}  

switchView() {  
    alert('切換')  
}

static navigationOptions = ({navigation,screenProps}) => ({  
    headerTitle: '企業(yè)服務(wù)',  
    headerTitleStyle: CommonStyles.headerTitleStyle,  
    headerRight: (  
        <NavigatorItem icon={ Images.ic_navigator } onPress={ ()=> navigation.state.params.switch() }/>  
    ),  
    headerStyle: CommonStyles.headerStyle  
}); 

（4）結(jié)合BackHandler處理返回和點(diǎn)擊返回鍵兩次退出App效果
點(diǎn)擊返回鍵兩次退出App效果的需求屢見(jiàn)不鮮郑诺。相信很多人在react-navigation下實(shí)現(xiàn)該功能都遇到了很多問(wèn)題夹姥，例如，其他界面不能返回辙诞。也就是手機(jī)本身返回事件在react-navigation之前攔截了辙售。如何結(jié)合react-natigation實(shí)現(xiàn)呢？和大家分享兩種實(shí)現(xiàn)方式：
1飞涂、在注冊(cè)StackNavigator的界面中旦部，注冊(cè)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('再點(diǎn)擊一次退出應(yīng)用',ToastAndroid.SHORT);  
    return true;  
}  

2、監(jiān)聽(tīng)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）實(shí)現(xiàn)Android中界面跳轉(zhuǎn)左右切換動(dòng)畫(huà)
react-navigation在Android中默認(rèn)的界面切換動(dòng)畫(huà)是上下较店。如何實(shí)現(xiàn)左右切換呢士八？很簡(jiǎn)單的配置即可：

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

然后在StackNavigator的配置下添加如下代碼：

transitionConfig:()=>({  
    screenInterpolator: CardStackStyleInterpolator.forHorizontal,  
})  

（6）解決快速點(diǎn)擊多次跳轉(zhuǎn)
當(dāng)我們快速點(diǎn)擊跳轉(zhuǎn)時(shí)，會(huì)開(kāi)啟多個(gè)重復(fù)的界面梁呈，如何解決呢婚度。其實(shí)在官方git中也有提示，解決這個(gè)問(wèn)題需要修改react-navigation源碼：

找到src文件夾中的addNavigationHelpers.js文件,替換為如下文本即可：

 /**
 * @flow
 *
 * Helpers for navigation.
 */

import type {
  NavigationProp,
  NavigationParams,
  NavigationScreenProp,
  NavigationNavigateAction,
} from './TypeDefinition';

import NavigationActions from './NavigationActions';
import invariant from './utils/invariant';

export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) {
  // 添加點(diǎn)擊判斷
  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,
      }),
  ),
};
}  

（7）解決goBack官卡，根據(jù)路由名稱返回指定界面
react-navigation默認(rèn)不支持根據(jù)路由名返回指定界面陕见，官方只提供了根據(jù)Key來(lái)做goBack的指定返回秘血。解決這個(gè)問(wèn)題同樣需要修改react-navigation源碼，在Navigation.goBack條件下添加對(duì)路由名的支持评甜。找到/node_modules/react-navigation/src/routers/StackRouter.js, 全局搜索backRoute,將條件判斷語(yǔ)句替換為如下代碼：

        if (key) {  
          const backRoute = null;  
          if(key.indexOf('id') >= 0) {  
            backRoute = state.routes.find((route: *) => route.key === action.key);  
          } else {  
            backRoute = state.routes.find(route => route.routeName === action.key);  
          }  
          backRouteIndex = state.routes.indexOf(backRoute);  
        }