在 React 本机 UI 组件中使用 RecyclerView 时“无法找到 receiveTouches 的 EventEmitter”

Question

我有一个 React 本机 UI 组件，它使用 RecyclerView 来显示可滚动的卡片列表。

我这样定义我的视图：

public class ListView extends LinearLayout {
    CustomRecyclerView recyclerView;
    SwipeRefreshLayout swipeRefreshLayout;
    RecyclerViewAdapter adapter;
    Product[] products;

    public ListView(Context context) {
        super(context);
        inflate(context, R.layout.list, this);
        recyclerView = findViewById(R.id.listView);
        recyclerView.setLayoutManager(new LinearLayoutManager(context));
        swipeRefreshLayout = findViewById(R.id.refresh_layout);
        adapter = new RecyclerViewAdapter();
        recyclerView.setAdapter(adapter);
    }

    @SuppressLint("NotifyDataSetChanged")
    public void setData(@Nullable ReadableArray data) {
        post(() -> {
            Gson gson = new Gson();
            assert data != null;
            products = gson.fromJson(data.toString(), Product[].class);
            adapter.clearProducts();
            adapter.addProducts(Arrays.asList(products));
            adapter.notifyDataSetChanged();
        });
    }
}

我的经理是这样的：

public class ListViewManager extends SimpleViewManager<ListView> {
    private final String REACT_CLASS = "nativeList";

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

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

    @ReactProp(name = "data")
    public void setData(ListView view, ReadableArray data) {
        view.setData(data);
    }

    @ReactProp(name = "refreshing")
    public void setRefreshing(ListView view, boolean refreshing) {
        view.setRefreshing(refreshing);
    }
}

我的列表正确显示，但当我与卡片交互时，我收到很多这样的错误：

E  Unhandled SoftException
                 com.facebook.react.bridge.ReactNoCrashSoftException: Cannot find EventEmitter for receivedTouches: ReactTag[26] UIManagerType[2] EventName[topTouchMove]
                    at com.facebook.react.uimanager.events.ReactEventEmitter.receiveTouches(ReactEventEmitter.java:103)
                    at com.facebook.react.uimanager.events.TouchEvent.dispatchModern(TouchEvent.java:192)
                    at com.facebook.react.uimanager.events.EventDispatcherImpl$DispatchEventsRunnable.run(EventDispatcherImpl.java:370)
                    at android.os.Handler.handleCallback(Handler.java:958)
                    at android.os.Handler.dispatchMessage(Handler.java:99)
                    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
                    at android.os.Looper.loopOnce(Looper.java:205)
                    at android.os.Looper.loop(Looper.java:294)
                    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:234)

ReactNative 似乎不知道 RecyclerView 内部的视图。因此，当我与它们交互时，ReactNative 会丢失并且无法在其一侧关联处理程序。

真正的问题是，有时，ReactTag[26] 对应于 ReactNative DOM 中完全不同的 View。 React Native 触发了一个完全不相关的处理程序，并导致应用程序出现奇怪的错误。

如何让 React Native 知道我的 recyclerView 里面有什么？或者至少忽略它？

Answer 1

我能够解决这个问题。在 RecyclerView 的每个子项上，我设置了一个足够高的 Id，以免与 React Native 生成的 Id 发生冲突。

它并不完美，但摆脱了随机点击。但它并没有修复 softException

Cannot find EventEmitter for receivedTouches

。