安卓系统上从左到右的动画，在将新屏幕推到堆栈时使用反应本地导航

Question

在带有react-native-navigation的Android上，当将新屏幕推送到堆栈时，我希望过渡动画从左到右(对于RTL布局，反之亦然(在iOS中，它是默认的，而在Android中，它似乎是用交叉分解动画显示的。如何实现iOS中的水平动画？

Answer 1

下面是一个示例堆栈导航器：

import { createStackNavigator, CardStyleInterpolators } from "@react-navigation/stack";
class CompaniesIndex extends React.Component<
ICompaniesIndexProps,
ICompaniesIndexState
> {
render() {
return (
<CompanyStack.Navigator
mode="modal"
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
}}
initialRouteName="AllCompanies">
<CompanyStack.Screen
options={{
title: "Firma Listesi",
header: (props) => <Header {...props} />,
}}
name="AllCompanies"
component={CompaniesAll}
/>
<CompanyStack.Screen
options={{
title: "Yeni Firma",
header: (props) => <Header {...props} />,
}}
name="NewCompany"
component={CompanyNew}
/>
<CompanyStack.Screen
options={{
title: "Firma Detayı",
header: (props) => <Header {...props} />,
}}
name="CompanyDetails"
component={CompanyDetails}
/>
</CompanyStack.Navigator>
);
}
}

您可以通过在堆栈导航器中添加screenOptions={{cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS}}来实现这一点。

Answer 2

对于react-navigation@6.0.1，请在screenOptions中使用animation: "slide_from_right"。

<Stack.Navigator
screenOptions={{
headerShown: false,
animation: "slide_from_right",
}}

Answer 3

如果您使用本机堆栈(@react navigation/native stack或react native screens/native stack(，只需在导航器的screenOptions中输入"stackAnimation"选项！

import { createNativeStackNavigator } from 'react-native-screens/native-stack';
const Stack = createNativeStackNavigator();
<Stack.Navigator screenOptions={{ headerShown: false, stackAnimation: 'slide_from_right' }}>
<Stack.Screen name="First" component={FirstScreen} />
<Stack.Screen name="Second" component={SecondScreen} />
</Stack.Navigator>