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此链接应为您提供有关此主题的更多详细信息，并希望动画能够正常工作。