реагировать навигация анимированный переключатель переход страницы

Question

Я разрабатываю собственное приложение реагирования Когда я использую

response-navigation-animated-switch

для эффектов перехода страницы.Но вы хотите знать, как настроить различные переходы для каждой или выбранных страниц.например, когда я нажимаю кнопку A на странице 1, эффект должен быть сдвинут влево и переходить на страницу B. Когда я нажимаю кнопку «назад», эффект должен быть вправо и возвращаться на страницу A. Ниже приведенвернуться назад код кнопки.

onPress={() =>this.props.navigation.navigate(Paramnav)}

(Примечание: - «Paramnav» - это переданное значение с другой страницы)

Это код страницы для навигационной страницы

import createAnimatedSwitchNavigator from 'react-navigation-animated-switch';
import {createAppContainer } from 'react-navigation';
import { Transition } from 'react-native-reanimated';
import React from 'react';

import Login   from "./Page/A";
import SignUp  from './Page/B';

const Navigate1 = createAnimatedSwitchNavigator({
    A:         {screen:A},
    B:         {screen:B},
},
{
    transition: (
        <Transition.Together>
        <Transition.Out
            type="slide-left"
            durationMs={200}
            interpolation="easeIn" />
        <Transition.In type="fade" durationMs={300} />
        </Transition.Together>
    ),
})

export const AppContainer = createAppContainer(Navigate1)

Answer 1

В настоящее время нет известного решения для указания пользовательских переходов для каждого экрана в createAnimatedSwitchNavigator Лучше всего было бы использовать createStackNavigator, который реализует собственные переходы для iOS и Android (новые экраны скользят справа на iOS, а на Android - снизу). Как и было запрошено, он запускает переходы назад при нажатии назад. Кроме того, вы также можете настроить переходы, передав transitionConfig.

Вы можете сделать это так:

import {createStackNavigator, createAppContainer } from 'react-navigation';
import { Transition } from 'react-native-reanimated';
import React from 'react';
import {
    Animated,
    Easing
} from 'react-native';

import Login   from "./Page/A";
import SignUp  from './Page/B';

//Slide from right animation
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
};

//Transition configurations for createStackNavigator
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 } = scene
      return SlideFromRight(index, position, width);
    },
  }
}

const Navigate1 = createStackNavigator({
    A:         {screen:A},
    B:         {screen:B},
},
{
    headerMode: 'none', //No headers, like createAnimatedSwitchNavigator
    transitionConfig: TransitionConfiguration //Configure transitions here
})

export const AppContainer = createAppContainer(Navigate1);

Это немного сложно, поэтому я не буду вдаваться в детали, но вы можете прочитать больше о createStackNavigator здесь и о настройке transitionConfig здесь