将新屏幕推入堆栈时，Android上的从左到右动画具有react-native-navigation

问题描述

在具有react-native-navigation的Android上，将新屏幕推送到堆栈时，我希望过渡动画是从左到右（反之亦然，对于RTL布局） 在iOS中，它是默认值，在Android中是默认值；它似乎带有交叉溶解动画。如何在iOS中获得水平动画？

解决方法

这是为您提供的示例堆栈导航器：

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",}}
          name="NewCompany"
          component={CompanyNew}
        />
        <CompanyStack.Screen
          options={{
            title: "Firma Detayı",}}
          name="CompanyDetails"
          component={CompanyDetails}
        />
      </CompanyStack.Navigator>
    );
  }
}

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

,

如果您使用原生堆栈（@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>