React-native-navigation 在导航时改变屏幕方向

Question

导航屏幕时的默认屏幕动画是屏幕从右到左。在某些情况下，我希望屏幕在导航时做不同的事情，例如从左到右或从下到上。 如何更改屏幕动画 导航时从屏幕左侧转到屏幕右侧或从下到上？

我提供了一个 snack example here 可以准确再现我想要做的事情以及下面的一些代码。

感谢您的任何见解，我比您更感激。

<Stack.Navigator
     initialRouteName="Home">       
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
    </Stack.Navigator>


<TouchableOpacity onPress={() => this.props.navigation.navigate('Screen2')}>
        <Text style={{fontSize: 20, fontWeight: 'bold', color: 'white'}}>
            Press me to navigate, I want to be able to change the direction the screen comes in from, like left to right or bottom to top.
        </Text>
        </TouchableOpacity>

Answer 1

您可以将 cardStyleInterpolator 属性用于屏幕动画。在下面的示例中，页面将从左向右滚动。

例如：

<Stack.Navigator 
   initialRouteName="Home"
   screenOptions={{
    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  }}
>       
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
</Stack.Navigator>

可以用什么（cardStyleInterpolator）：

forBottomSheetAndroid
forFadeFromBottomAndroid
forFadeFromCenter
forHorizontalIOS
forModalPresentationIOS
forNoAnimation
forRevealFromBottomAndroid
forScaleFromCenterAndroid
forVerticalIOS

React-native-navigation 在导航时改变屏幕方向

React-native-navigation change screen direction when navigating

reactjs

react-native

react-native-navigation