Как я могу использовать пользовательские переходы между экранами и реагировать на навигацию 4+?

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();