React Native中如何让TextInputProModule与TextInputProManager创建的视图通信？

嘿，这个问题在React Native原生组件开发里挺常见的——核心就是让模块能精准定位到对应的视图实例，然后调用它的原生方法。我给你两种可靠的实现方式，推荐用第二种，因为它复用了React Native自身的视图管理机制，更稳妥。

方法一：自定义映射存储视图实例（手动维护） #

这种方式是在TextInputProManager里用一个全局Map来存储视图实例和它的唯一tag，模块通过tag从Map里取实例调用方法。

1. 修改TextInputProManager.java #

import android.widget.EditText;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import java.util.HashMap;
import java.util.Map;

public class TextInputProManager extends SimpleViewManager<EditText> {
    // 全局Map存储EditText实例和对应的view tag
    public static final Map<Integer, EditText> EDIT_TEXT_INSTANCES = new HashMap<>();
    public static final String REACT_CLASS = "TextInputPro";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected EditText createViewInstance(ThemedReactContext reactContext) {
        return new EditText(reactContext);
    }

    // 视图挂载完成后，将实例存入Map
    @Override
    public void onAfterUpdateTransaction(EditText view) {
        super.onAfterUpdateTransaction(view);
        EDIT_TEXT_INSTANCES.put(view.getId(), view);
    }

    // 视图销毁时移除，避免内存泄漏
    @Override
    public void onDropViewInstance(EditText view) {
        super.onDropViewInstance(view);
        EDIT_TEXT_INSTANCES.remove(view.getId());
    }
}

2. 修改TextInputProModule.java #

import android.widget.EditText;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class TextInputProModule extends ReactContextBaseJavaModule {
    public static final String NAME = "TextInputProModule";

    public TextInputProModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return NAME;
    }

    // JS调用的focus方法，传入view tag
    @ReactMethod
    public void focus(int viewTag) {
        // 必须在UI线程操作视图
        getReactApplicationContext().runOnUiQueueThread(() -> {
            EditText editText = TextInputProManager.EDIT_TEXT_INSTANCES.get(viewTag);
            if (editText != null) {
                editText.requestFocus();
            }
        });
    }
}

方法二：复用React Native内置的视图管理（推荐） #

React Native的UIManagerModule已经维护了视图实例和tag的映射，我们直接用它来获取实例，不用自己维护Map，更安全。

修改TextInputProModule.java（Manager无需额外修改） #

import android.widget.EditText;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.uimanager.NativeViewHierarchyManager;
import com.facebook.react.uimanager.UIManagerModule;

public class TextInputProModule extends ReactContextBaseJavaModule {
    public static final String NAME = "TextInputProModule";

    public TextInputProModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return NAME;
    }

    @ReactMethod
    public void focus(int viewTag) {
        getReactApplicationContext().runOnUiQueueThread(() -> {
            // 获取UIManager实例
            UIManagerModule uiManager = getReactApplicationContext().getNativeModule(UIManagerModule.class);
            if (uiManager == null) return;

            NativeViewHierarchyManager hierarchyManager = uiManager.getNativeViewHierarchyManager();
            try {
                // 通过tag获取EditText实例
                EditText editText = hierarchyManager.resolveView(viewTag);
                if (editText != null) {
                    editText.requestFocus();
                }
            } catch (IllegalArgumentException e) {
                // 处理视图已销毁的情况
                e.printStackTrace();
            }
        });
    }

    // 可以扩展其他方法，比如清空文本
    @ReactMethod
    public void clearText(int viewTag) {
        getReactApplicationContext().runOnUiQueueThread(() -> {
            UIManagerModule uiManager = getReactApplicationContext().getNativeModule(UIManagerModule.class);
            if (uiManager == null) return;

            NativeViewHierarchyManager hierarchyManager = uiManager.getNativeViewHierarchyManager();
            try {
                EditText editText = hierarchyManager.resolveView(viewTag);
                if (editText != null) {
                    editText.setText("");
                }
            } catch (IllegalArgumentException e) {
                e.printStackTrace();
            }
        });
    }
}

最后完善TextInputProPackage.java #

确保同时注册Manager和Module：

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class TextInputProPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new TextInputProModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.singletonList(new TextInputProManager());
    }
}

JS端调用示例 #

在你的JS组件里，通过findNodeHandle获取视图的tag，然后调用Module的方法：

import { useRef } from 'react';
import { NativeModules, findNodeHandle, Button } from 'react-native';
import TextInputPro from './TextInputPro'; // 你的自定义JS组件

const { TextInputProModule } = NativeModules;

const DemoComponent = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    const tag = findNodeHandle(inputRef.current);
    if (tag !== null) {
      TextInputProModule.focus(tag);
    }
  };

  return (
    <>
      <TextInputPro ref={inputRef} />
      <Button title="Focus Input" onPress={handleFocus} />
    </>
  );
};

关键注意事项 #

• 必须在UI线程操作视图：所有对EditText的操作都要放在runOnUiQueueThread里，因为Android的视图操作不能在子线程执行。
• 内存泄漏防护：如果用方法一，一定要在onDropViewInstance里移除Map中的实例；方法二因为复用了React Native的管理，无需额外处理。
• 异常处理：调用resolveView时可能抛出异常（比如视图已销毁），记得捕获处理。

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