React-Native 0.68.2 iOS端Modal无法显示问题求助

问题背景 #

将React Native应用升级至React 17.0.1和react-native 0.68.2版本后，iOS端无论是使用react-native-modal@13.0.1库还是官方Modal组件，Modal均无法正常显示。替换官方示例代码测试后问题依旧，存在相关已知Bug反馈。

测试代码 #

import React, {useState} from 'react';
import {Image, View, Text, TouchableOpacity, Alert, Pressable, StyleSheet, SafeAreaView} from 'react-native';
import Modal from 'react-native-modal'

const login = props => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <SafeAreaView style={styles1.centeredView}>
      <Modal isVisible={modalVisible}>
        <View style={styles1.centeredView}>
          <View style={styles1.modalView}>
            <Text style={styles1.modalText}>Hello World!</Text>
            <Pressable
              style={[styles1.button, styles1.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}>
              <Text style={styles1.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>

      <TouchableOpacity
        style={[styles1.button, styles1.buttonOpen]}
        onPress={() => setModalVisible(true)}>
        <Text style={styles1.textStyle}>Show Modal</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles1 = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default login;

解决方案 #

• 升级react-native-modal版本：当前13.0.1版本未适配RN 0.68.x，升级至最新兼容版本：

  npm install react-native-modal@latest --save
  # 或 yarn add react-native-modal@latest
  

• 替换SafeAreaView组件：改用React Native自带的SafeAreaView（而非第三方库版本），修改导入语句为：

  import { SafeAreaView } from 'react-native';
  

• 调整Modal层级与结构：给Modal设置高优先级zIndex，同时简化内部嵌套结构：

  <Modal 
    isVisible={modalVisible}
    style={{zIndex: 9999}}
  >
    <View style={styles1.modalView}>
      <Text style={styles1.modalText}>Hello World!</Text>
      <Pressable
        style={[styles1.button, styles1.buttonClose]}
        onPress={() => setModalVisible(false)}>
        <Text style={styles1.textStyle}>Hide Modal</Text>
      </Pressable>
    </View>
  </Modal>
  

• 清理缓存并重构项目：
  1. 清除Metro缓存：npx react-native start --reset-cache
  2. 进入iOS目录重新安装依赖：cd ios && pod install && cd ..
  3. 卸载模拟器中的应用后重新编译运行
• 检查iOS配置：确保Info.plist中UIViewControllerBasedStatusBarAppearance设置为YES，缺失则添加该键值对
• 排查依赖冲突：创建仅包含Modal的最简RN项目测试，确认是否为第三方库或项目配置冲突导致

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