react-native - react native - 改变导航方向(即从右到左)

Question

我正在使用 react-navigation 从一个屏幕导航到另一个屏幕。
顺便说一句，我正在使用 createStackNavigator .

我正在使用下面的代码在屏幕之间导航。

<Button onPress={()=>this.props.navigation.navigate('ScreenTwo')}>button-></Button>

它工作正常，但我想改变动画方向。目前，当我按下按钮时 ScreenTwo只是弹出，而不是我希望屏幕从右向左滑动。

我可以在导航时改变动画方向吗？

Answer 1

您需要在导航配置中使用自定义屏幕转换。尝试以下代码，(确保从'react-native'导入Easing，Animated)

const yourStack = createStackNavigator(
  {
    One: ScreenOne,
    Two: DetailsTwo,
  },
  {
    initialRouteName: 'One',
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      screenInterpolator: sceneProps => {
                const {layout, position, scene} = sceneProps;
                const {index} = scene;

                const width = layout.initWidth;
                const translateX = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [width, 0, 0],
                });

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

                return {opacity, transform: [{translateX: translateX}]};
            },
    })
  }
);