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

Question

在 Android 上react-native-navigation，当将新屏幕推送到堆栈时，我希望过渡动画从左到右（反之亦然，对于 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",
  }}