Question

在我的本机项目中，我正在创建一个游戏，让用户在视图之间进行，但不保持堆栈。

每个视图都有自己的自定义后退按钮，但这不是标准后退按钮，例如iOS左上角。

在每次视图更改之间，我需要一个过渡动画。大多数都是淡入淡出，但其他人都是习惯性的。

我已经从https://reactnavigation.org构建了一个导航器，但我使用.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 此链接应该为您提供有关此主题的更多详细信息，并希望动画有效。

React Native中视图之间的转换，而不维护堆栈

1 个答案: