轉子http://www.jianshu.com/p/b877115fff1b

之前寫過react-navigation使用技巧，那篇文章中主要講了react-navigation的屬性，封裝和一些小技巧。雖然上篇文章中也有一些小技巧，但因為補充的比較晚，導致有些人沒有看全，再加上我又找到了一些新的小玩意，特此寫了本篇文章，如果之後還有新發現，也會再這篇文章中更新出來。

如果遇到什麼問題可以在評論區回覆，或者加QQ群397885169詢問

1、讓TabBar擁有點選事件

感謝群友再遇見的分享。

官方的api裡面是沒有提供tabBar的點選事件的，但在開發中經常需要監聽tabBar的點選事件，解決這個問題的一種方法就是去修改原始碼，另一種是監聽onTransitionEnd

原始碼中一共需要修改8處地方，包含3個js檔案。原始碼在下面。

1、react-navigation目錄下src/views/TabView/TabBarBottom.js

2、react-navigation目錄下src/views/TabView/TabBarTop.js

3、react-navigation目錄下src/views/TabView/TabView.js

注意：第111行中的getScreenConfig需要手動改成getScreenOptions，要不然修改完原始碼會報錯。

原始碼在這裡，要注意修改getScreenOptions

修改原始碼之後，在頁面中這麼用：

static navigationOptions = ({navigation,screenProps}) => ({
    onTabPress:(()=>{
        alert('Home');
    })
});

2、修改頁面的跳轉動畫

在上一篇文章中，說了怎麼將安卓的跳轉動畫改成iOS那樣的，但其實react-navigation一共提供了4種跳轉動畫：
1、從右向左： forHorizontal；
2、從下向上： forVertical；
3、安卓那種的從下向上： forFadeFromBottomAndroid

但因為庫的限制，想實現某些頁面使用某種動畫還是很難的，只能通過Demo中提供的笨方法來實現。

首先還是匯入react-navigation中的方法

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

如果要改變跳轉動畫只能在StackNavigator中實現transitionConfig方法

const MainStack = StackNavigator({
    Main:{
        screen:Main,
    },
},{
    // mode:'modal',
    headerMode: 'screen',
    transitionConfig:()=>({
     // 只要修改最後的forVertical就可以實現不同的動畫了。
      screenInterpolator:CardStackStyleInterpolator.forVertical,
    })
});

3、在Reset方法中傳參

react-navigation中的reset方法，應該都不陌生吧，重置路由。但有的需求是在登陸之後，重置路由並傳遞引數到某個頁面，之前一直以為不可以，直到群友的react-native reset方法中傳參的寫法的這篇文章出現，感謝群友nextChampion的貢獻。

const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
    NavigationActions.navigate({routeName: 'Home', params: { token: '123456' }})
    ]
})

this.props.navigation.dispatch(resetAction);

在頁面中可以通過如下方法得到引數。

this.props.navigation.state.params.token

4、goBack返回指定頁面

在上篇文章中也有這個技巧，這裡是總結重發。

react-navigation目錄下src/routers/StackRouter.js

if (action.type === NavigationActions.BACK) {
    let backRouteIndex = null;
    if (action.key) {

      const backRoute = state.routes.find(
        /* $FlowFixMe */
        /* 修改原始碼 */
        route => route.routeName === action.key
        /* (route: *) => route.key === action.key */
      );
      /* $FlowFixMe */
      console.log('backRoute =====',backRoute);
      backRouteIndex = state.routes.indexOf(backRoute);
      console.log('backRoute =====',backRouteIndex);
    }
    if (backRouteIndex == null) {
      return StateUtils.pop(state);
    }
    if (backRouteIndex >= 0) {
      return {
        ...state,
        routes: state.routes.slice(0, backRouteIndex+1),
        index: backRouteIndex - 1 + 1,
      };
    }
  }

注意：這樣的修改原始碼之後，如果專案中使用Redux，並且啟用了滑動返回，很會很大機率導致app卡死，所以並不太推薦這種方式，最好使用下面的方式

5、react-navigation整合Redux

可能會有人認為這樣整合會麻煩，而且react-navigation內部實現也是類似Redux的高階函式。我之前也是這麼認為的，直到在識兔中，使用 Redux 修改首頁圖片之後 滑動返回 會導致app卡死。

react-navigation整合Redux之後，能獲取當前screen的key，routeNmae等引數，goBack()的時候就可以直接取到key，而不用修改原始碼啦！

如果看不懂下面的修改步驟，可以先看下之前的文章Redux "使用"教程

整合

1、新增addNavigationHelpers

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

2、首先修改識兔中的App.js的匯出方式

const AppWithNavigationState = ({ dispatch, nav }) => (
    <MyApp navigation={addNavigationHelpers({ dispatch, state: nav })}/>
);

const mapStateToProps = state => ({
    nav: state.nav,
});

export default connect(mapStateToProps)(AppWithNavigationState);

3、建立StackReducer

// MyApp 是在App.js中匯出的
import { MyApp } from '../APP';


export default function StackReducer(state , action) {
    let nextState;
    switch (action.type) {
        default:
            nextState = MyApp.router.getStateForAction(action, state);
            break;
    }
    return nextState || state;
}

4、修改rootReducer

import nav from './StackReducer';

const RootReducer = combineReducers({
    ...,
    nav,
});

export default RootReducer;

使用

1、修改ShiTu.js

export default connect((state) => {
    ...
    const routes  = state.nav.routes;
    return {
        ...
        routes
    };
},{...})(ShiTu)

2、使用

const {routes} = this.props;
// 會有意想不到的驚喜哦！
console.log(routes);

感謝群友Roc的提供的react-navigation整合redux的 腳手架 可以通過它快速實現整合Redux。

6、安卓返回鍵在react-navigation中的正常監聽

之前使用Navigator的時候，可以通過下面的方法實現監聽安卓的返回鍵，但使用了react-navigation後，會很迷茫，不知該怎麼監聽了。

解決辦法：整合Redux咯！