HarmonyOS鸿蒙Next使用RN开发,点击焦点定位错误问题

HarmonyOS鸿蒙Next使用RN开发,点击焦点定位错误问题 我们现在依赖的是 "@rnoh/react-native-openharmony": "0.72.48",

目前有个现象,在 RN 中反复显示关闭弹窗,快速点击几次后,会出现点击的其实是关闭按钮,但是焦点自动定位到录入框了,并且触发弹出了系统键盘。这是什么原因。

3 回复

开发者您好,这边RN使用如下代码并没有复现问题,这边麻烦提供下可复现的代码,使用代码如下:

import React, { useState } from 'react';
import {
  View,
  Text,
  Button,
  Modal,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
  Animated,
  TextInput,
  Dimensions
} from 'react-native';

const { width, height } = Dimensions.get('window');

function NativeModalExample() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        placeholder="Enter text here"
      />
      <Button
        title="打开模态窗"
        onPress={() => setModalVisible(true)}
      />
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalTitle}>基础模态窗</Text>
            <Text style={styles.modalText}>
              这是使用 React Native 原生 Modal 组件实现的模态窗
            </Text>
            <Button
              title="关闭"
              onPress={() => setModalVisible(false)}
            />
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 25,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    minWidth: 300,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  modalText: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: 'center',
    lineHeight: 22,
  },
});

export default NativeModalExample;

更多关于HarmonyOS鸿蒙Next使用RN开发,点击焦点定位错误问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next使用RN开发时,点击焦点定位错误通常与RN框架在鸿蒙上的适配有关。焦点系统差异可能导致事件坐标映射不准确。可检查RN组件在鸿蒙上的布局渲染机制,确认触摸事件处理逻辑是否与系统焦点管理冲突。需关注鸿蒙Next的API变更对RN事件派发的影响。

在HarmonyOS Next上使用RN(通过@rnoh/react-native-openharmony)开发时,出现点击焦点定位错误(如点击关闭按钮却触发输入框焦点并弹出键盘),通常与ArkUI的焦点竞争或RN的事件冒泡/响应链在HarmonyOS上的适配有关。可能的原因和排查方向如下:

  1. 焦点管理冲突:HarmonyOS的ArkUI框架有自身的焦点系统,与RN的焦点管理可能存在时序冲突。当快速操作时,RN组件卸载/挂载与ArkUI焦点切换可能不同步,导致焦点被错误地重置到上一个可聚焦组件(如输入框)。

  2. 事件冒泡延迟:在快速连续点击时,RN事件的冒泡处理可能被延迟或中断,而HarmonyOS底层事件系统可能先响应了默认的焦点切换逻辑(例如触摸事件被同时解释为“寻找最近的可聚焦组件”)。

  3. 输入框自动获取焦点:如果输入框组件(如TextInput)在渲染时设置了autoFocus属性,或在关闭弹窗时未正确销毁/重置焦点,可能被系统重新触发。

建议检查

  • 确保弹窗关闭时,主动调用输入框的blur()方法,并检查组件卸载逻辑。
  • 在快速操作场景下,尝试控制点击事件的防抖(debounce)或节流(throttle),避免同时触发多个焦点变更。
  • 确认RNOH版本与HarmonyOS Next的兼容性,查看官方文档是否有已知的焦点相关限制。

此问题通常需要结合具体代码结构(如弹窗与输入框的组件关系)进一步分析。

回到顶部