2016-08-28 19 views
2

私のnavReducer.jsには、.popと.pushを扱う以下のものがあります。しかし、同じガイドラインに従って、NavigationStateUtilsを使用すると、現在のシーンを新しいルートに置き換える.replaceをどのように実装できますか? Navigator.replaceと非常によく似ています。React Native + ReduxでNavigationStateUtilsを使用してNavigator.replaceを実装する方法は?

import { NavigationExperimental } from 'react-native' 

const { 
    StateUtils: NavigationStateUtils 
} = NavigationExperimental 

function navigationState (state = initialState, action) { 
    switch(action.type) { 

    case PUSH_ROUTE: 
     if (state.routes[state.index].key === (action.route && action.route.key)) return state 
    return NavigationStateUtils.push(state, action.route) 

    case POP_ROUTE: 
     if (state.index === 0 || state.routes.length === 1) return state 
     return NavigationStateUtils.pop(state) 

    default: 
    return state 

    } 
} 

export default navigationState 
+0

私も答え – Fantasim

+0

@Fantasimどれ運によって興味がありますか? –

答えて

1

ですが、既にNavigationStateUtilsにはありますか?

/** 
* Replace a route by a key. 
* Note that this moves the index to the positon to where the new route in the 
* stack is at. 
*/ 
function replaceAt(
    state: NavigationState, 
    key: string, 
    route: NavigationRoute, 
): NavigationState { 
    const index = indexOf(state, key); 
    return replaceAtIndex(state, index, route); 
} 

/** 
* Replace a route by a index. 
* Note that this moves the index to the positon to where the new route in the 
* stack is at. 
*/ 
function replaceAtIndex(
    state: NavigationState, 
    index: number, 
    route: NavigationRoute, 
): NavigationState { 
    invariant(
    !!state.routes[index], 
    'invalid index %s for replacing route %s', 
    index, 
    route.key, 
); 

    if (state.routes[index] === route) { 
    return state; 
    } 

    const routes = state.routes.slice(); 
    routes[index] = route; 

    return { 
    ...state, 
    index, 
    routes, 
    }; 
} 
+0

申し訳ありませんが、私は静かな理解ではありません。答えとアップヴォートを受け入れる前に、私はどのようにNavReducerに統合し、改訂された例を表示できますか?私は 'PUSH_ROUTE'と' POP_ROUTE'がどのように設定されているのと同じフォーマットに従おうとしています。 –

+0

私はちょうどNavigationExperimentalについてのサンプルプロジェクトをセットアップしました:https://github.com/Sunshow/react-native-redux-starter-kit – Sunshow

+0

中国語の中には申し訳ありませんが、動作します。 – Sunshow

-1

"navigationStateUtils.jumpTo" 方法チェックアウト:それは与えられたルートキーによってルートへのリダイレクトを行う https://github.com/facebook/react-native/blob/master/Libraries/NavigationExperimental/NavigationStateUtils.js

を。 重要なお知らせ:この操作の後、同じナビゲーションキーを "navigationStateUtils.push"を介して再度押してください。

方法のHere`s内部構造:実装された方法を使用して、コードの

jumpTo(state: NavigationState, key: string): NavigationState { 
    const index = NavigationStateUtils.indexOf(state, key); 
    return NavigationStateUtils.jumpToIndex(state, index); 
} 

編集されたバージョン:

import { NavigationExperimental } from 'react-native' 

const { 
    StateUtils: NavigationStateUtils 
} = NavigationExperimental 

function navigationState (state = initialState, action) { 
    switch(action.type) { 

    case PUSH_ROUTE: 
     if (state.routes[state.index].key === (action.route && action.route.key)) return state 
    return NavigationStateUtils.push(state, action.route) 

    case POP_ROUTE: 
     if (state.index === 0 || state.routes.length === 1) return state 
     return NavigationStateUtils.pop(state) 

    case JUMP_TO_ROUTE: 
     return NavigationStateUtils.jumpTo(action.routeKey) 

    default: 
    return state 

    } 
} 

export default navigationState 
関連する問題