如何在React Navigation中实现自适应内容高度的非全屏Modal？

方案1：基于 React Navigation Native Stack 自定义容器样式 #

不用额外依赖，直接通过配置 Native Stack 的弹窗样式实现半屏/自适应效果：

1. 配置 Screen 的弹窗参数，开启透明背景和底部滑入动画：

<Stack.Screen
  name="CustomModal"
  component={CustomModalContent}
  options={{
    presentation: 'modal',
    cardStyle: {
      backgroundColor: 'transparent',
      opacity: 1,
    },
    cardOverlayEnabled: true, // 显示背景蒙层
    animation: 'slide_from_bottom',
  }}
/>

2. 在弹窗组件内部，将内容容器固定在屏幕底部：

import { View, Dimensions } from 'react-native';

const CustomModalContent = ({ navigation }) => {
  const windowHeight = Dimensions.get('window').height;
  return (
    <View style={{
      flex: 1,
      justifyContent: 'flex-end',
      backgroundColor: 'rgba(0,0,0,0.5)',
    }}>
      {/* 半屏模式：固定高度为屏幕的50% */}
      {/* 自适应模式：去掉 height 属性，由内容撑开高度 */}
      <View style={{
        backgroundColor: '#fff',
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        height: windowHeight * 0.5,
        padding: 16,
      }}>
        {/* 你的弹窗内容 */}
      </View>
    </View>
  );
};

3. Android 适配：在 AndroidManifest.xml 中给对应 Activity 添加 android:windowSoftInputMode="adjustResize"，避免键盘遮挡弹窗内容。

方案2：使用 React Navigation Sheet Navigator（推荐） #

React Navigation 官方提供的 Sheet 导航器，专门适配底部弹窗场景，原生级别的跨平台表现：

1. 安装依赖：

npm install @react-navigation/sheet

2. 创建 Sheet 导航器：

import { createSheetNavigator } from '@react-navigation/sheet';

const Sheet = createSheetNavigator();

function BottomSheetNavigator() {
  return (
    <Sheet.Navigator
      screenOptions={{
        sheetStyle: {
          backgroundColor: '#fff',
          borderTopLeftRadius: 16,
          borderTopRightRadius: 16,
        },
        // 半屏模式：设置为0.5（0=关闭，1=全屏）；自适应模式设置为'auto'
        sheetPosition: 0.5,
        overlayStyle: {
          backgroundColor: 'rgba(0,0,0,0.5)',
        },
      }}
    >
      <Sheet.Screen name="AirbnbStyleSheet" component={SheetContent} />
    </Sheet.Navigator>
  );
}

3. 在主导航中嵌套该 Sheet 导航器，通过 navigation.navigate('AirbnbStyleSheet') 触发弹窗。该方案支持拖拽调整高度，完全匹配 Airbnb 底部弹窗的交互体验。

方案3：使用 React Native 原生 Modal 组件 #

脱离 React Navigation 的弹窗体系，直接用 RN 原生 Modal 实现：

import { Modal, View, TouchableOpacity, Text } from 'react-native';

const CustomBottomModal = ({ visible, onClose }) => {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
      presentationStyle="overFullScreen" // Android 需设置避免状态栏问题
    >
      {/* 点击蒙层关闭弹窗 */}
      <TouchableOpacity 
        style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}
        onPress={onClose}
        activeOpacity={1}
      />
      <View style={{
        backgroundColor: '#fff',
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        padding: 16,
      }}>
        <Text>你的弹窗内容</Text>
        <TouchableOpacity onPress={onClose}>
          <Text>关闭</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  );
};

自适应高度直接由内容撑开，无需设置固定高度；半屏模式则给内容 View 添加 height: Dimensions.get('window').height * 0.5 即可。

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