在 react native 中更改导航的默认动画

Question

我正在开发一个在IOS中具有本机反应的应用程序。我正在使用导航重定向到其他屏幕。为了继续前进，我使用了以下代码，其中包含从左到右的动画：

this.props.navigation.navigate('Home');

为了回到上一个屏幕，我使用了以下代码，其中包含从右到左的动画。

const {goBack} = this.props.navigation;
goBack();

我的问题是，如果我想在情况一(转发到另一个屏幕(中更改默认动画，是否有任何简单的方法可以在 react native 中将动画更改为从右到左(如后退场景(。提前谢谢。

Answer 1

试试这个

onPress={() => navigator.navigate({routeName: 'YOUR_ROUTE_NAME', transitionStyle: 'inverted'}) }

Answer 2

如果您使用的是 React Navigation (https://reactnavigation.org/(，则可以将帮助程序方法与堆栈导航器一起使用来创建过渡动画。 例如，推送动画：

navigation.push('Profile', { owner: 'Angelina' });

堆栈导航代码(完整文档在这里：https://reactnavigation.org/docs/stack-navigator/#animations(：

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerMode: 'screen',
headerTintColor: 'white',
headerStyle: { backgroundColor: 'tomato' },
}}
>
<Stack.Screen
name="Home"
component={Home}
options={{
title: 'Awesome app',
}}
/>
<Stack.Screen
name="Profile"
component={Profile}
options={{
title: 'My profile',
}}
/>
<Stack.Screen
name="Settings"
component={Settings}
options={{
gestureEnabled: false,
}}
/>
</Stack.Navigator>
);
}