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

【问题标题】：Left-to-right animation on Android with react-native-navigation when pushing new screen to stack将新屏幕推送到堆栈时，Android 上的从左到右动画与 react-native-navigation
【发布时间】：2020-08-11 11:51:14
【问题描述】：

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

【问题讨论】：

标签： android react-native react-native-navigation

【解决方案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}} 来实现。

【讨论】：

谢谢！但实际上我的意思是react-native-navigation，而不是react-navigation...但是再次感谢您！
谢谢您！但是使用此解决方案时，我使用 goBack() 时会有一点反弹，所以我最终使用了 {TransitionPresets } from '@react-navigation/stack'; 并在我的导航器中使用了 <Stack.Navigator screenOptions={{ ...TransitionPresets.SlideFromRightIOS }}>

【解决方案2】：

对于react-navigation@6.0.1，在屏幕选项中使用 animation: "slide_from_right"。

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

【讨论】：

谢谢！但实际上我的意思是react-native-navigation，而不是react-navigation...但再次感谢您！

【解决方案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>

【讨论】：

谢谢！但是我使用的是 react-native-navigation，而不是 react-navigation……