HarmonyOS鸿蒙Next中加载RN时Modal组件没有显示

1. Modal组件样式兼容性问题：React Native 自带 Modal 在鸿蒙（HarmonyOS）适配层（@rnoh/react-native-openharmony）中，不支持直接通过 style 设置 width / height 和 zIndex ，鸿蒙端 Modal 的层级和布局由原生层管理，RN 侧的 zIndex 无效。

2. 透明模式配置缺失： transparent={true} 时，鸿蒙端需要通过原生层的背景透明度配置生效，仅设置 RN 侧 View 背景色可能因层级遮挡无法显示。

3. 适配层版本特性限制：@rnoh/react-native-openharmony 0.72.67 对 RN 0.72.5 的 Modal 适配存在细节差异，直接复用 RN 原生写法会出现兼容性问题。

解决方案（针对鸿蒙适配场景优化）

1. 移除无效样式，调整 Modal 基础配置

import React, { useState } from 'react';
import { SafeAreaView, StatusBar, TouchableOpacity, Text, Modal, View, StyleSheet } from 'react-native';
import { Dimensions } from 'react-native';
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        barStyle="dark-content"
        backgroundColor="#fff"
      />
      <TouchableOpacity 
        onPress={() => setIsVisible(true)} // 直接设为true，简化逻辑
        style={styles.button}
      >
        <Text>Show Modal</Text>
      </TouchableOpacity>

      {/* 优化后的 Modal 配置 */}
      <Modal
        transparent={true}
        visible={isVisible}
        onRequestClose={() => setIsVisible(false)} // 必须实现关闭逻辑（鸿蒙端要求）
        animationType="fade" // 添加动画确保渲染触发
        presentationStyle="fullScreen" // 鸿蒙端支持的全屏模式
      >
        {/* 外层遮罩 + 内容容器，通过绝对定位占满屏幕 */}
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalText}>test test</Text>
            {/* 新增关闭按钮，方便测试 */}
            <TouchableOpacity onPress={() => setIsVisible(false)} style={styles.closeButton}>
              <Text>Close Modal</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    padding: 16,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  // 遮罩层：绝对定位占满屏幕，背景半透明（鸿蒙端可见）
  modalOverlay: {
    flex: 1,
    width: screenWidth,
    height: screenHeight,
    backgroundColor: 'rgba(0,0,0,0.5)', // 遮罩层，确保Modal可见
    alignItems: 'center',
    justifyContent: 'center',
  },
  // 内容容器：红色背景，明确宽高
  modalContent: {
    width: '80%',
    height: '50%',
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 8,
  },
  modalText: {
    color: '#fff',
    fontSize: 20,
    marginBottom: 20,
  },
  closeButton: {
    padding: 12,
    backgroundColor: '#fff',
    borderRadius: 4,
  },
});

export default App;