React Native Android页面导航从下到上转场动画失效问题

直接用presentation: 'modal'在Android端不生效是因为Android默认的modal转场逻辑和iOS不同，以下是两种可行的解决方法：

方法一：自定义转场动画（推荐，全版本兼容） #

通过自定义transitionSpec和cardStyleInterpolator实现从下到上的动画，这种方式不依赖系统版本，iOS和Android都能生效。

全局配置（所有页面生效） #

在创建Stack Navigator时配置全局的screenOptions：

import { createStackNavigator, TransitionSpecs, CardStyleInterpolators } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        transitionSpec: {
          open: TransitionSpecs.TransitionIOSSpec,
          close: TransitionSpecs.TransitionIOSSpec,
        },
        cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
      }}
    >
      {/* 其他页面 */}
      <Stack.Screen name="OfferDetails" component={OfferDetails} />
    </Stack.Navigator>
  );
}

单独页面配置（仅OfferDetails生效） #

如果只想给单个页面设置转场动画，可在对应的Screen的options里单独配置：

import { Easing } from 'react-native';

<Stack.Screen
  name="OfferDetails"
  component={OfferDetails}
  options={{
    headerShown: false,
    transitionSpec: {
      open: {
        animation: 'timing',
        config: {
          duration: 300,
          easing: Easing.out(Easing.poly(4)),
        },
      },
      close: {
        animation: 'timing',
        config: {
          duration: 300,
          easing: Easing.in(Easing.poly(4)),
        },
      },
    },
    cardStyleInterpolator: ({ current, layouts }) => {
      return {
        cardStyle: {
          transform: [
            {
              translateY: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [layouts.screen.height, 0],
              }),
            },
          ],
        },
        overlayStyle: {
          opacity: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 0.5],
          }),
        },
      };
    },
  }}
/>

这里的cardStyleInterpolator定义了页面从屏幕底部滑入的逻辑，transitionSpec控制动画的时长和缓动曲线。

方法二：利用Android系统的Modal样式（仅Android 10+生效） #

如果你的应用只需要适配Android 10及以上版本，可以通过设置modalPresentationStyle调用系统原生的从下到上的modal动画：

<Stack.Screen
  name="OfferDetails"
  component={OfferDetails}
  options={{
    headerShown: false,
    presentation: 'modal',
    modalPresentationStyle: 'pageSheet',
  }}
/>

pageSheet是Android 10+支持的模态样式，会从底部滑入，但这种方式的动画样式由系统控制，自定义空间有限。

注意事项 #

• 确保@react-navigation/stack和@react-navigation/native为最新版本，避免版本兼容问题。
• 如果使用自定义导航容器，需确保配置正确，没有覆盖默认转场逻辑。

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