react-native - 为什么这个对 react-native native 模块的调用会阻塞 UI？

Question

正如文档中所建议的，我将一些长的数据获取代码移动到 native 模块中以释放 JS 线程，但我观察到这仍然阻塞了 UI。为什么会这样，我能做些什么来避免这种情况？

从 JS 调用 native 模块，如下所示:

MyNativeModule.fetch(path).then( data => dispatchData(data) )

native 方法如下所示(它使用 Android Firebase SDK):

@ReactMethod
public void fetch(final String path, final Promise promise) {
    root.child(path).addListenerForSingleValueEvent(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot snapshot) {
            if (snapshot.exists()) {
                promise.resolve(castSnapshot(snapshot));
            } else {
                promise.resolve(null);
            }
        }
        @Override
        public void onCancelled(FirebaseError firebaseError) {
            promise.reject(firebaseError.getMessage());
        }
    }
}

castSnapshot方法转换 Firebase DataSnapshot对象变成 WriteableMap .如果有用，我可以分享实现。

我观察到的是，即使我替换 promise.resolve(castSnapshot(snapshot));通过 castSnapshot(snapshot); promise.resolve(null); ，调用阻塞了 UI :所以它没有通过桥发送数据，这是罪魁祸首。如果数据量大， castSnapshot可能需要一些时间，这显然是阻塞的。

即使这段代码运行时间很长，也不应该把它移到一个释放 UI 的 native 模块中吗？我对此有什么不明白的？

非常感谢。

Answer 1

尝试包装 root.child在一个新的 Thread 实例中添加一行，如下所示:

@ReactMethod
public void fetch(final String path, final Promise promise) {
    new Thread(new Runnable() {
        public void run() {
            root.child(path)...
        }
    }).start();
}