HarmonyOS鸿蒙Next中使用reactnative混合开发，引入react-native-modal，App闪退Modal isVisible=true后App就闪退

HarmonyOS鸿蒙Next中使用reactnative混合开发，引入react-native-modal，App闪退Modal isVisible=true后App就闪退

@rnoh/react-native-openharmony 版本：0.72.53


"@react-native-community/blur": "^4.4.0",
"@react-native-oh-tpl/blur": "^4.4.0-0.1.1",
"@react-native-oh-tpl/react-native-device-info": "^11.1.0-0.0.5",
"@react-native-oh-tpl/react-native-fast-image": "^8.6.3-0.4.16",
"@react-native-oh-tpl/react-native-gesture-handler": "^2.14.16",
"@react-native-oh-tpl/react-native-modal": "^13.0.1-0.0.1",
"@react-native-oh-tpl/react-native-pager-view": "^6.2.3-0.2.8",
"@react-native-oh-tpl/react-native-safe-area-context": "^4.7.4-0.2.1",
"@react-native-oh-tpl/react-native-tab-view": "^3.5.2-0.1.3",
"@react-native-oh-tpl/react-native-webview": "^13.10.2-1.0.34",
"@react-native-oh/tpl/stack": "^6.4.0-0.0.4",
"@react-native-oh/react-native-harmony": "^0.72.53-1",
"@react-native-ohos/react-native-linear-gradient": "^3.0.1-rc.1",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/material-top-tabs": "6.6.13",
"@react-navigation/native": "6.1.17",
"@sdcx/pull-to-refresh": "^0.26.0",
"@shopify/flash-list": "1.7.0",
"react": "18.2.0",
"react-native": "0.72.5",
"react-native-device-info": "11.1.0",
"react-native-fast-image": "^8.6.3",
"react-native-gesture-handler": "2.14.1",
"react-native-linear-gradient": "3.0.0-alpha.1",
"react-native-modal": "13.0.1",
"react-native-pager-view": "6.2.3",
"react-native-safe-area-context": "^4.7.4",
"react-native-screens": "3.29.0",
"react-native-status-bar-height": "^2.6.0",
"react-native-vector-icons": "^10.2.0",
"react-native-webview": "13.10.2"

按照 https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-modal.md 进行的引入。

项目可以正常启动，Android、iOS功能正常。 以下是使用部分的代码

import Modal from "react-native-modal";

<Modal
        testID={"modal"}
        isVisible={isModalVisible}
        onBackdropPress={() => setIsModalVisible(false)}
        statusBarTranslucent={true}
        swipeDirection="down"
        animationIn="slideInUp"
        animationOut="slideOutDown"
        animationInTiming={300}
        animationOutTiming={300}
        backdropTransitionInTiming={300}
        backdropTransitionOutTiming={300}
        style={{ margin: 0, backgroundColor: "rgba(255,255, 255, 0.5)" }}
      >
        <TouchableWithoutFeedback onPress={() => setIsModalVisible(false)}>
          {/* 高斯模糊弹窗 */}
          {/*<BlurView
            style={{
              flex: 1,
              backgroundColor: "rgba(255,255,255,0.5)"
            }}
            blurType="light"
            blurAmount={10}
            reducedTransparencyFallbackColor="transparent">
            弹窗内容
          </BlurView>*/}
          <TouchableWithoutFeedback>
            <View style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "flex-end"
            }}>
              <View style={{ flexDirection: "row" }}>
                <TouchableOpacity style={styles.actionButton}>
                  <Text style={styles.buttonText}>xxx</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.actionButton}>
                  <Text style={styles.buttonText}>xxx</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.actionButton}>
                  <Text style={styles.buttonText}>xxx</Text>
                </TouchableOpacity>
              </View>
              <TouchableOpacity
                style={{
                  width: 200,
                  marginBottom: 40,
                  alignItems: "center"
                }}
                onPress={() => setIsModalVisible(false)}
              >
                <Text style={styles.closeText}>×</Text>
              </TouchableOpacity>
            </View>
          </TouchableWithoutFeedback>
          {/*<BlurView/>*/}
        </TouchableWithoutFeedback>
      </Modal>

闪退的部分 FaultLog

Device info:emulator Build info:emulator 5.0.0.123(SP16DEVC00E123R4P11log) Fingerprint:fe0968bc73e94a0ce800c7817154a4478501132699ac0f1aca26d20f19f86a0c Module name:com.example.wsport Version:1.0.0 VersionCode:1000000 PreInstalled:No Foreground:Yes Timestamp:2025-03-24 14:01:42.865 Pid:4097 Uid:20020050 Process name:com.example.wsport Process life time:152s Reason:Signal:SIGSEGV(SEGV_MAPERR)@0x000000fe4ec72dbc Fault thread info: Tid:4475, Name:RNOH_JS

03-24 14:01:42.837 4097 4097 E C01406/OHOS::RS: FlushImplicitTransaction return, [renderServiceClient_:1, transactionData empty:1] 03-24 14:01:42.837 4097 4097 I A0beef/#RNOH_CPP: █____ RNInstanceCAPI.cpp:283> RNInstanceCAPI::synchronouslyUpdateViewOnUIThread 03-24 14:01:42.840 4097 4465 I C02805/InputKeyFlow: ac: up: 391 03-24 14:01:42.841 4097 4465 I C02805/InputKeyFlow: [P:U:391][OnPointerEvent:505] id:391 recv 03-24 14:01:42.841 4097 4465 I C04213/InputKeyFlow: [] OnInputEvent(86): eid:1,InputId:391,wid:38,action:4 03-24 14:01:42.841 4097 4465 I C0420c/WMSEvent: [] NotifyPointerEvent(3523): Input id:391 03-24 14:01:42.841 4097 4465 I C04213/InputKeyFlow: [] ConsumePointerEventInner(829): InputId:391,wid:38,pointId:0,sourceType:2,winRect:[0,0,1260,2720],needNotifyEvent:1 03-24 14:01:42.841 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] InputTracking id:391, fingerId:0, type=1, inject=0, isPrivacyMode=0 03-24 14:01:42.841 4097 4097 W A0beef/#RNOH_CPP: █____ ArkUINodeRegistry.cpp:93> Touch event for node with handle: 0x7ecf948b80 not found 03-24 14:01:42.842 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] Id:391, exclusive 0 type: 1 03-24 14:01:42.842 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] Id:391, exclusive 0 type: 1 03-24 14:01:42.842 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] Id:391, exclusive 0 type: 1 03-24 14:01:42.842 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] Id:391, click 0 up, state: 0 03-24 14:01:42.842 4097 4097 I C0391e/AceGesture: [(100000:100000:scope)] Click try accept 03-24 14:01:42.842 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] Click accepted, tag: Custom 03-24 14:01:42.842 4097 4097 W A0beef/#RNOH_CPP: █____ ArkUINodeRegistry.cpp:111> Node with handle: 0x7ec81a0640 not found 03-24 14:01:42.842 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] Id:391, click 0 up, state: 6 03-24 14:01:42.842 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] Id:391, click 0 up, state: 6 03-24 14:01:42.842 4097 4097 I C03951/InputKeyFlow: [(100000:100000:scope)] Id:391, click 0 up, state: 6 03-24 14:01:42.843 4097 4097 I C03919/AceInputTracking: [(100000:100000:scope)] Consumed new event id=391 in ace_container, lastEventInfo: id:-1 03-24 14:01:42.851 4097 4097 I A0beef/#RNOH_CPP: █____ RNInstanceCAPI.cpp:283> RNInstanceCAPI::synchronouslyUpdateViewOnUIThread 03-24 14:01:42.864 4097 4475 I A0beef/#RNOH_CPP: █ UIManagerModule.cpp:52> getConstantsForViewManager: RCTModalHostView 03-24 14:01:42.911 4097 5297 I C057c1/IPCWorkThread: ThreadHandler 124: proto:0 policy:0 name:OS_IPC_3_5297 invoker:2934738688


更多关于HarmonyOS鸿蒙Next中使用reactnative混合开发，引入react-native-modal，App闪退Modal isVisible=true后App就闪退的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

你好，请问一下是按照文档引入报错还是特殊场景报错？当前使用的DevEco Studio版本和运行时SDK版本分别是多少？

更多关于HarmonyOS鸿蒙Next中使用reactnative混合开发，引入react-native-modal，App闪退Modal isVisible=true后App就闪退的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


各种清理缓存，然后重启，模拟器上也可以正常运行了。

以为是模拟器中无法运行，各种清理缓存，然后重启，模拟器上也可以正常运行了

在HarmonyOS鸿蒙Next中使用React Native进行混合开发时，引入react-native-modal并在Modal的isVisible属性设置为true后导致App闪退，可能是由于以下原因：

  1. 兼容性问题：react-native-modal可能未完全适配HarmonyOS的底层架构，导致在特定条件下触发闪退。鸿蒙Next的底层实现与Android有所不同，某些React Native组件可能无法完全兼容。

  2. UI线程阻塞：Modal的显示可能涉及复杂的UI操作，如果这些操作在主线程中执行时间过长，可能会导致应用无响应（ANR）或直接闪退。

  3. 内存泄漏或资源不足：Modal的显示可能消耗大量内存或资源，如果设备资源不足，可能会导致应用崩溃。

  4. 依赖冲突：react-native-modal可能与其他依赖库存在冲突，尤其是在HarmonyOS环境下，某些依赖库的行为可能与预期不一致。

  5. 生命周期管理问题：Modal的显示可能与应用的生命周期管理不匹配，导致在特定状态下（如应用进入后台）触发闪退。

  6. 日志分析：查看应用日志（如Logcat或鸿蒙的HiLog）可以获取更多关于闪退的具体信息，如异常堆栈、内存使用情况等。

  7. 版本问题：确保使用的react-native-modal版本与React Native和HarmonyOS的版本兼容，某些旧版本可能存在已知问题。

  8. 权限问题：某些UI操作可能需要特定权限，如果权限未正确配置，可能会导致应用崩溃。

建议通过日志分析、代码审查和逐步排查依赖关系来定位具体问题。

在HarmonyOS鸿蒙Next中使用React Native进行混合开发时，引入react-native-modal后，当Modal的isVisible属性设置为true时，App闪退可能是由于以下原因：

  1. 版本兼容性问题：确保react-native-modal与当前React Native版本兼容。
  2. 依赖冲突：检查项目中是否存在与react-native-modal冲突的依赖。
  3. 权限问题：确保应用已获取必要的权限，如SYSTEM_ALERT_WINDOW。
  4. 代码逻辑错误：检查Modal组件的使用方式，确保isVisible状态更新逻辑正确。

建议逐步排查以上问题，或提供更多错误日志以便进一步分析。

回到顶部