我创建了一个混合应用程序,其中很少有屏幕(聊天)用react native编写。我已遵循react-native integration with existing app准则,并创建了一个活动来在创建我的android活动时启动react应用程序。
我的活动代码类似于

public class MyReactActivity extends Activity implements
    DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(getApplication());
        mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
      super.onBackPressed();
   }
}


这种方法的问题在于,每次创建MyReactActivity时都会创建React应用程序,此过程需要1-2秒。即使当用户按下返回并返回到此活动时,它也会再次开始响应应用程序。我想减少此加载时间。

如果我稍微修改上面的代码,并将ReactRootView和ReactInstanceManager更改为静态。每次我创建活动时,它都使用相同的ReactRootView和InstanceManager。这无疑会改善我的活动的加载时间,但可能会导致性能下降。新的活动代码类似于,

public class MyReactActivity extends Activity implements
    DefaultHardwareBackBtnHandler {
    private static ReactRootView mReactRootView;
    private static ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if(mReactRootView != null) {
            return;
        }
        mReactRootView = new ReactRootView(getApplication());
        mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
    }

    @Override
    public void onStart() {
       super.onStart();
       setContentView(mReactRootView);
    }

    @Override
    protected void onStop(){
      if (mReactRootView != null) {
          ViewGroup parent = (ViewGroup) mReactRootView.getParent();
          if(parent != null) {
              parent.removeView(mReactRootView);
          }
      }
      super.onStop();
   }

    @Override
    public void invokeDefaultOnBackPressed() {
      if (mReactRootView != null) {
          ViewGroup parent = (ViewGroup) mReactRootView.getParent();
          if(parent != null) {
              parent.removeView(mReactRootView);
          }
      }
      super.onBackPressed();
   }
}


这种方法似乎运行良好,但是我认为,这可能会导致内存泄漏,因为对ReactRootView和ReactInstanceManager的静态引用将始终将它们保留在内存中。令人惊讶的是,当我为内存监视器运行分析器任务时,没有看到任何内存泄漏。

有人对此有任何建议吗?可以使用静态引用吗?每次我加载活动时,是否还有其他方法可以优化react app的加载时间?

谢谢!

最佳答案

您所遵循的方法是正确的方向。

文档提到您可以使用singleton拥有一个ReactInstanceManager实例:


  ReactInstanceManager可以在多个活动和/或片段之间共享。您将要制作自己的ReactFragment或ReactActivity,并拥有一个容纳ReactInstanceManager的单例持有者。当您需要ReactInstanceManager时(例如,将ReactInstanceManager连接到那些Activity或Fragments的生命周期),请使用单例提供的那个。


https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

10-08 15:00