Android 反应导航动画切换页面转换

当我使用时，我正在开发一个react原生应用程序

反应导航动画开关

用于页面转换效果。但我想知道如何为每个页面或所选页面设置不同的转换。 例如，当我按下第1页上的按钮A时，效果应该是向左滑动并转到第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)

从“react navigation AnimatedSwitchNavigator”导入createAnimatedSwitchNavigator；
从“react navigation”导入{createAppContainer}；
从“react native reanimated”导入{Transition}；
从“React”导入React；
从“/Page/A”导入登录名；
从“./Page/B”导入注册；
const Navigate1=createAnimatedSwitchNavigator({
A:{屏幕：A}，
B:{屏幕：B}，
},
{
过渡：(
),
})
导出常量AppContainer=createAppContainer（导航1）

目前还没有为

createAnimatedSwitchNavigator

最好的办法是使用

createStackNavigator

，它实现了iOS和Android的本机转换（在iOS上从右侧滑入新屏幕，在Android上从底部淡入）。与请求的一样，当您按back时，它会向后运行转换。此外，还可以通过传递

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