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

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

0 голосов
/ 01 апреля 2020

Мне нужно изменить свой переход в зависимости от экрана, поэтому у меня было это до реакции-навигации 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 ().

Любые предложения о том, как обновить это до нового стиля ? Я читал документы, которые не охватывают переходы на экран, а другие страницы не заполнены.

1 Ответ

2 голосов
/ 03 апреля 2020

Убедитесь, что вы установили эти версии специально 

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