反应导航动画切换页面过渡

Question

我正在开发一个 React Native 应用当我使用

react-navigation-animated-switch

用于页面过渡效果。但是想知道如何为每个或选定的页面设置不同的过渡。例如，当我按下第 1 页上的按钮 A 时，效果应该是向左滑动并转到 B 页。当我按下 'go back' 按钮时，效果应该是向右滑动并返回到页面 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 实现原生转换（新屏幕从 [=25= 的右侧滑入，从 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 here and about customizing transitionConfig here

的更多信息

反应导航动画切换页面过渡

react navigation animated switch Page transition

variables

android

transition

reactjs

react-native