本机反应-更改导航方向（即，从右到左）

Question

我正在使用反应导航从一个屏幕导航到另一个屏幕。顺便说一下，我正在使用createStackNavigator。

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

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

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

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

Answer 1

由satya164在 react-navigation/stack github repo 中回答，使用gestureDirection: 'horizontal-inverted'indefaultNavigationOptions/navigationOptions

Screen: {
  screen: Screen,
  navigationOptions: {
    ...TransitionPresets.SlideFromRightIOS,
    gestureDirection: 'horizontal-inverted',
  },
},

相关链接如下：

https://github.com/react-navigation/stack/issues/377#issuecomment-578504696

https://reactnavigation.org/docs/stack-navigator/#animation-related-options

Answer 2

您需要在导航配置旁边使用“自定义屏幕过渡”。尝试下面的代码，（确保从“ 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}]};
            },
    })
  }
);