React Native使用react-native-modal时背景失效、弹窗显示异常怎么解决

你排查到的属性配置错误就是导致所有异常的直接原因：
react-native-modal的显隐控制核心属性为isVisible，不识别原生Modal的visible属性。错误传入visible后，组件无法正确感知显隐状态变化，内部的背景渲染逻辑、弹窗位置动画计算、尺寸适配逻辑全部无法正常触发，完全匹配你遇到的背景失效、弹窗高度异常、状态更新卡顿的现象。

• 修正显隐属性：将代码中visible={modalVisible}替换为isVisible={modalVisible}，修改后背景失效、状态更新不顺畅的问题会直接恢复正常。
• 清理无效属性：你当前代码中animationType、transparent是React Native原生Modal的属性，react-native-modal不支持这两个配置，直接删除即可：
  • 要实现底部滑入效果，替换为animationIn="slideInUp"、animationOut="slideOutDown"配置即可
  • react-native-modal默认已实现背景半透明效果，无需额外配置
• 补全半屏适配：在Modal内部新增一层容器组件，设置固定高度为屏幕高度的50%，即可实现半屏弹出效果，修正后的参考代码如下：

import Modal from 'react-native-modal';
import { View } from 'react-native';

// 其余业务逻辑代码

<Modal
  isVisible={modalVisible}
  animationIn="slideInUp"
  animationOut="slideOutDown"
  swipeDirection="down"
  onRequestClose={closeModal}
  onSwipeComplete={closeModal}
  style={{justifyContent: 'flex-end', margin: 0}}
>
  {/* 半屏内容容器 */}
  <View style={{ height: '50%', backgroundColor: '#fff', borderTopLeftRadius: 16, borderTopRightRadius: 16 }}>
    {/* 此处放置弹窗业务内容 */}
  </View>
</Modal>

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