React Native React Navigation 6 如何配置页面从右往左切换动画

解决方案 #

你使用的是createNativeStackNavigator（原生栈导航），它的动画配置规则和旧版JS栈、老版本React Navigation完全不同，不要混用两类配置属性，按下方修改即可：

1. 仅配置设置页面从右往左滑入（符合你的需求）

直接在Settings对应的Stack.Screen上添加options配置：

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator(); 

function MainScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="To Read" component={ToReadScreen} />
      <Tab.Screen name="Have Read" component={HaveReadScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ReadX"
          component={MainScreen}
        />
        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
          {/* 新增动画配置 */}
          options={{
            animation: 'slide_from_right',
            // 可选：自定义动画时长，单位毫秒
            animationDuration: 300
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 全局配置所有栈页面都用该动画

如果需要所有页面切换都用从右往左滑入，把配置写到Stack.Navigator的screenOptions属性中即可：

<Stack.Navigator
  screenOptions={{
    animation: 'slide_from_right'
  }}
>
  {/* 所有Screen都会继承该动画配置 */}
  <Stack.Screen name="ReadX" component={MainScreen} />
  <Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>

注：如果你之前尝试的是cardStyleInterpolator这类旧版JS栈的配置，在原生栈中不会生效，原生栈直接使用官方提供的预设即可，除了slide_from_right外还有fade、slide_from_bottom等预设可选

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