reactjs - 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