web-dev-qa-db-ja.com

Reactナビゲーション：NavigationActions.reset、goBackおよびgetStateForActionを使用してルートに戻る

StackNavigatorアプリで4つの画面をナビゲートした後、最初の画面に戻りたいとします。これを行うには3つの異なる方法があるようであり、私がやりたい場所にナビゲートしますが、各方法には前の各画面を循環するアニメーションがあります。

SCREEN_DからSCREEN_Aに移動するクリーンな方法はありますか？

言い換えれば、SCREEN_Cから後方に移動するときにSCREEN_Bを見る前にSCREEN_AとSCREEN_Dを一瞬見たくない

navigation.navigate(SCREEN_A);
...
navigation.navigate(SCREEN_B);
...
navigation.navigate(SCREEN_C);
...
navigation.navigate(SCREEN_D);

これを行う3つの方法：

1。

return this.props.navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [NavigationActions.navigate({ routeName: 'SCREEN_A'})]
                  }));

2。

 const {SCREEN_B_KEY} = this.props.navigation.state.params
 this.props.navigation.goBack(SCREEN_B_KEY)

3。

const defaultGetStateForAction = Navigation.router.getStateForAction;

Navigation.router.getStateForAction = (action, state) =>{
  if(action.type === "Navigation/BACK"){
    const routes = [
      {routeName: 'First'},
    ];
    return {
      ...state,
      routes,
      index: 0,
    };
  }
  return defaultGetStateForAction (action,state);
}
javascriptreactjsreact-nativereact-navigation
24
Turnipdabeets

反応ネイティブナビゲーションにはpopToTopがあり、打撃のように使用できます

this.props.navigation.popToTop()
8
Sultan Ali

ここに簡単な修正があります。これにより、（前方または後方に）ナビゲートするときにすべてのトランジションが削除されます。

const Nav = StackNavigator({
  Screens
},{
  transitionConfig,
  navigationOptions
});

transitionConfigでこれを追加します：

const transitionConfig = () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
    },
  })

TransitionConfigは、デフォルトの画面遷移をオーバーライドするオブジェクトを返す関数です。 https://reactnavigation.org/docs/navigators/stack

  • 誰かが単一のナビゲーションでアニメーションを変更する方法を知っているなら、私はその方法を聞きたいです！
7
Turnipdabeets

これを行うには、 Navigation prop のpopToTopメソッドを使用します。また、reduxを使用している場合は、 Redux統合 を更新する必要があります。

お役に立てれば！

5
Denny Schuldt

また、これにいくつかの時間を費やし、私が発見したことを要約しましょう、これには複数の解決策/回避策があります：

1）CardStackStyleInterpolatorを使用

Cristiano Santos で言及された プルリクエスト はマージされたようです。したがって、このインポートでCardStackStyleInterpolatorをロードできます。

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

このように適用するには：

const YourStackNavigator = StackNavigator({
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
}, {
    transitionConfig: () => ({
        screenInterpolator: (props) => CardStackStyleInterpolator.forHorizontal(props)
    })
});

私の場合、次のような画面にジャンプするだけです。

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

しかし、私のレデューサーでは、Modal_AddGoodClass画面がトリガーされます。

const NewExportReceiptNavigationReducer = (state, action) => {
    // Default stuff

    let newStateBuffer = newState || state;

    if (action) {
        if (action.type === 'Navigation/NAVIGATE') {
            if (action.routeName === 'Modal_AddGoodClass') {
                newStateBuffer = {
                    index:  0,
                    routes: [
                        newStateBuffer.routes[newStateBuffer.routes.length - 1]
                    ]
                };
            }
        }
    }

    return newStateBuffer;
};

module.exports = NewExportReceiptNavigationReducer;

これは、「順方向」ではなく「逆方向」のアニメーションが使用されるという事実を除いて、非常にうまく機能します。

hereCardStackStyleInterpolatorを使用するサンプルコードもあります。

2）getStateForActionを上書きします：

フェンドリアン 言及 ここ ルーターのgetStateForActionを上書きして、ナビゲーターが戻ることを回避できます。これは、iOSでの「スワイプバック」ジェスチャを除いて機能するようです。

Nav = StackNavigator(navScreens, navOptions);
const defaultGetStateForAction = Nav.router.getStateForAction;
Nav.router.getStateForAction = (action, state) => {
  if (
    state &&
    action.type === NavigationActions.BACK &&
    (
      state.routes[state.index].routeName === 'Login' ||
      state.routes[state.index].routeName === 'Main'
    )
  ) {
    // Returning null indicates stack end, and triggers exit
    return null;
  }
  return defaultGetStateForAction(action, state);
};

nov-05-2017 11-34-07

0
Thomas Kekeisen

これは、新しいルートを作成せずにホーム（ルート）にリセットするための私の作業ソリューションです

if(this.categoriesNav.state.nav.index >0){
    let k = this.categoriesNav.state.nav.routes[1].key;
    this.categoriesNav.dispatch(NavigationActions.back({key: k})); }

categoriesNavは私のスタックナビゲーターを参照しています

0
Masoud Teymouri