为什么调用本地反应原生模块阻止UI？

Question

正如文档中所建议的,我将一些长数据获取代码移动到本机模块中以释放JS线程,但我发现这仍然阻止了UI.为什么这样,我该怎么办才能避免这种情况？

从JS调用本机模块,如下所示:

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

原生方法看起来像这样(它使用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？我怎么没有得到这个？

非常感谢.

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();
}