Question

我在使用

时正在开发本机应用程序

反应导航动画开关

用于页面过渡效果。但是想知道如何为每个或选定的页面设置不同的过渡。例如，当我按第1页上的按钮A时，效果应向左滑动并转到第B页。当我按“后退”按钮时，效果应向右滑动并返回到A页。返回按钮代码。

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

（NB：-“ 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 here和自定义transitionConfig here的更多信息< / p>

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

1 个答案: