React Native修改导航方向：实现Home页面从左侧滑入

如果你使用React Navigation实现页面跳转，默认栈导航的页面是从右侧滑入，要改成左侧滑入可以通过以下方式配置：

全局修改栈导航动画方向（React Navigation 5+） #

在创建Stack Navigator时，通过screenOptions统一设置所有页面的滑入方向：

import { createStackNavigator } from '@react-navigation/stack';
import { Easing } from 'react-native';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        // 反转手势与动画方向，实现从左侧滑入
        gestureDirection: 'horizontal-inverted',
        // 可自定义动画时长与缓动效果
        transitionSpec: {
          open: {
            animation: 'timing',
            config: {
              duration: 300,
              easing: Easing.inOut(Easing.ease),
            },
          },
          close: {
            animation: 'timing',
            config: {
              duration: 300,
              easing: Easing.inOut(Easing.ease),
            },
          },
        },
      }}
    >
      {/* 路由配置 */}
      <Stack.Screen name="YourCurrentPage" component={YourCurrentComponent} />
      <Stack.Screen name="Home" component={HomeComponent} />
    </Stack.Navigator>
  );
}

单个跳转设置左侧滑入 #

如果只需要特定跳转（比如当前页到Home页）使用左侧滑入，可在navigate时传入自定义选项：

navigation.navigate('Home', {
  options: {
    gestureDirection: 'horizontal-inverted',
  },
});

低版本React Navigation（4.x）适配 #

对于4.x版本，需在栈导航的配置中设置navigationOptions：

import { createStackNavigator } from 'react-navigation-stack';

const AppStack = createStackNavigator(
  {
    YourCurrentPage: YourCurrentComponent,
    Home: HomeComponent,
  },
  {
    defaultNavigationOptions: {
      transitionConfig: () => ({
        screenInterpolator: sceneProps => {
          const { layout, position, scene } = sceneProps;
          const { index } = scene;

          const translateX = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [layout.initWidth, 0, -layout.initWidth],
          });

          return { transform: [{ translateX }] };
        },
      }),
    },
  }
);

内容的提问来源于stack exchange，提问作者remshanx