React Native中視圖之間的過渡而無需維護堆棧

Question

在我的react native項目中，我正在創建一個游戲，該游戲的用戶在視圖之間進行進度，但不維護堆棧。

每個視圖都有自己的自定義后退按鈕，但這不是標准的后退按鈕，例如，iOS的左上角。

在每次更改視圖之間，我都需要一個過渡動畫。 大多數將是淡入淡出，但其他是自定義。

我已經從https://reactnavigation.org構建了一個導航器，但是正在使用.reset來確保未創建視圖堆棧。 但是，這似乎阻止了轉換的觸發（我可能是錯的）。

有沒有比在導航器上使用reset更簡單的方法來切換視圖？

Answer 1

//MyApp is your StackNavigator
const defaultGetStateForAction = MyApp.router.getStateForAction;

MyApp.router.getStateForAction = (action, state) => {
  // custom action.type will be used
  if (state && action.type === 'CustomBack') {
    // create new routes object with just one route since you want to reset
    const routes = [
      {routeName: action.routeName, params: action.params},
    ];
    // Above routes object will replace your previous state.routes stack
    return {
      ...state,
      routes,
      index: routes.length - 1,
    };
  }
  // if action.type !== 'CustomBack', then use built in method
  return defaultGetStateForAction(action, state);
};

現在，自定義導航操作已准備就緒，您可以在所需屏幕上按下按鈕時使用navigation.dispatch進行調用。

  this.props.navigation.dispatch({
    type: 'CustomBack',
    routeName: 'ScreenToBePushed',
    params: {id: 'some params here if you want'}
  });

https://reactnavigation.org/docs/routers/#Custom-Navigation-Actions此鏈接應為您提供有關此主題的更多詳細信息，並希望動畫能夠正常工作。