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

正如文档中所建议的,我将一些长数据获取代码移动到本机模块中以释放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)); by castSnapshot(snapshot); promise.resolve(null);,调用阻止了UI:所以它不是通过桥接器发送数据的罪魁祸首.如果数据量很大,castSnapshot可能需要一些时间,这显然是阻塞的.

即使这段代码长时间运行,也不应该将它移动到原生模块中释放UI?我怎么没有得到这个?

非常感谢.

最佳答案
尝试在新的Thread实例中包装root.child行,如下所示:

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

转载注明原文:为什么调用本地反应原生模块阻止UI? - 代码日志