Как изменить анимацию навигации по умолчанию в реагировать родной - PullRequest
Новая
       36

Как изменить анимацию навигации по умолчанию в реагировать родной

0 голосов
/ 08 мая 2019

Есть ли способ изменить анимацию навигации по умолчанию в реагировать родной. в IOS его проведите справа налево. Android снизу вверх. мы можем сделать это константу для обеих платформ? Большое спасибо

1 Ответ

0 голосов
/ 08 мая 2019

вы можете установить различные режимы для экранов, один из них modal: 

const MainStackNavigator = createStackNavigator(
  {
    SplashScreen: { screen: SplashScreen },
    OnBoardingScreen: { screen: OnBoarding },
    LoginScreen: { screen: LoginContainer },
  },
  {
    navigationOptions: {
      header: null
    },
    mode: "modal",
    cardStyle: { backgroundColor: "transparent" },
   transitionConfig: TransitionConfiguration,

  }
);

вы также можете использовать transitionConfig, он возвращает объект с двумя параметрами transitionSpec и screenInterpolator,Вы можете настроить свойства синхронизации анимации, такие как длительность и замедление, в TranspecSpec и преобразования макета в screenInterpolator.Вот пример: 

    const TransitionConfiguration = () => {
  return {
    transitionSpec: {
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: (sceneProps) => {
      const { layout, position, scene } = sceneProps;
      const width = layout.initWidth;
      const { index, route } = scene
      const params = route.params || {}; // <- That's new
      const transition = params.transition || 'default'; // <- That's new
      return {
        collapseExpand: CollapseExpand(index, position),
        default: SlideFromRight(index, position, width),
      }[transition];
    },
  }
}

По умолчанию новые экраны скользят справа. 

let SlideFromRight = (index, position, width) => {
  const inputRange = [index - 1, index, index + 1];
  const translateX = position.interpolate({
    inputRange: [index - 1, index, index + 1],
    outputRange: [width, 0, 0]
  })
  const slideFromRight = { transform: [{ translateX }] }
  return slideFromRight
};

В transitionSpec нет ничего особенного.На самом деле, это очень похоже на стандартный пример React Native Animated.Мы устанавливаем продолжительность нашего перехода и профиль замедления, настраиваем его на анимацию на основе синхронизации, а не на пружину, и используем собственный драйвер для повышения производительности.

В этом случае происходит волшебство screenInterpolator.screenInterpolator - это функция, которую React Navigation вызывает с аргументом, который мы будем называть sceneProps.screenInterpolator (sceneProps) вызывается для каждого экрана в стеке, а возвращаемое значение используется для настройки его перехода.

Если навигация (сцена) имеет параметр param {transition: 'collapseExpand'} экранной интерполяции, использует анимацию CollapseExpand.

let CollapseExpand = (index, position) => {
  const inputRange = [index - 1, index, index + 1];
  const opacity = position.interpolate({
    inputRange,
    outputRange: [0, 1, 1],
  });

  const scaleY = position.interpolate({
    inputRange,
    outputRange: ([0, 1, 1]),
  });

  return {
    opacity,
    transform: [
      { scaleY }
    ]
  };
};
...