Question

我需要根据屏幕来改变过渡，所以我在进行反应导航4之前就已经有了它：

const HomeStack = createStackNavigator({
    Home: HomeScreen,
    AScreen,
    BScreen,
    CScreen,
    DScreen,
    EScreen,
  },
  {
    headerMode: 'none',
    transitionConfig: (nav) => handleCustomTransition(nav),
  }

然后类似：

const handleCustomTransition = ({scenes}) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];
  const duration = 500;

  if (prevScene
    && prevScene.route.routeName === 'AScreen'
    && nextScene.route.routeName === 'BScreen') {
    return fromBottom(duration);
  } else if (prevScene
    && prevScene.route.routeName === 'AScreen'
    && nextScene.route.routeName === 'CScreen') {
    return fromBottom(duration);
  }
  return fromRight();
};

因此，如果要使用A-> B或A-> C，则动画是fromBottom（），但是如果要进行其他任何转换，则动画是fromRight（）。

关于如何将其更新为新样式的任何建议？我已经阅读了文档，其中没有涵盖每个屏幕的转换，其他页面也不完整。

Answer 1

确保您已经专门安装了这些版本

"react-navigation": "^4.0.10",
"react-navigation-redux-helpers": "^4.0.1",
"react-navigation-stack": "^1.10.3",

由于在更高版本的反应导航中，自定义转换存在问题。现在在您要创建stackNavigator的文件中。

const RouteConfigs = {
   splash: {
     screen: SplashScreen
   },
};

const handleCustomTransition = ({ scenes }) => {
  const nextScene = scenes[scenes.length - 1].route.routeName;
  switch (nextScene) {
    case "splash":
      Utils.enableExperimental();
      return Utils.fromBottom();

    default:
      return false;
  }
};

const NavigatorConfigs = {
  navigationOptions: {
    gesturesEnabled: false
  },
  headerMode: "none",

  transitionConfig: screen => {
    return handleCustomTransition(screen);
  },
  initialRouteName: "splash"
};

const AppNavigator = createStackNavigator(RouteConfigs, NavigatorConfigs);

export default createAppContainer(AppNavigator);

在这些行中，我编写了自己的自定义动画。因此，您可以定义自己的动画。

Utils.enableExperimental();
return Utils.fromBottom();

如何使用自定义屏幕在带有反应导航4+的屏幕上进行过渡？

1 个答案: