如何在现有的Android应用程序中添加单个React Native视图？

Question

我是一名有用的助手，可以为您翻译文本。

我正在处理一个大型已存在的Android和iOS项目，我所在的团队希望采用React Native。起初，我们想在RN中实现一个单一的功能，因为我们没有足够的能力一次性迁移整个项目。

我成功地添加了一个RN视图，无论是从本地节点服务器还是来自位于资产文件夹中的JS捆绑文件，但感觉有点hacky。我知道这在iOS上支持，但我在文档中找不到任何关于与现有Android项目集成的信息。以下是我想出的要点：

public class ReactNativeView extends FrameLayout {

    private static final String COMPONENT_NAME = "AwesomeProject";
    // Path of our RN module relative to project root
    private static final String MODULE_NAME = "react-sources/index.android"

    public ReactNativeView(Context Context) {
        super(context);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
                .setApplication(AppDelegate.sharedApplication())
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.BEFORE_RESUME);

        if (BuildConfig.USE_RN_LOCAL_SERVER) {
            // Set module name to be loaded from local node server
            builder.setJSMainModuleName(MODULE_NAME);
        } else {
            Uri uri = AssetsManager.getInstance().getJsBundleUri();
            // Load bundled jsBundle
            builder.setJSBundleFile(uri.getPath());
        }

        ReactInstanceManager reactInstanceManager = builder.build();
        MainActivity mainActivity = MainActivity.getMainActivity();

        setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        ReactRootView reactRootView =
            new ReactRootView(AppDelegate.sharedApplication().getTopActivity());
        // Is it really necessary to call 'startReactApplication' each time we want to render a react component?
        reactRootView.startReactApplication(reactInstanceManager, COMPONENT_NAME, null);

        addView(reactRootView);
        // After the view is added to the hierarchy we call the manager's 'onResume' function
        // to show the react view
        reactInstanceManager.onResume(mainActivity, mainActivity); // <-- What kind of sorcery is this?!
    }
}

我还添加了一个变量到BuildConfig中，用于确定要使用哪个JS包：

buildTypes {
    debug {
        buildConfigField "boolean", "USE_RN_LOCAL_SERVER", "true" // load from local server
    }
    release {
        minifyEnabled true
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        buildConfigField "boolean", "USE_RN_LOCAL_SERVER", "false"
    }
}

这是一个完整的hack。当我实际上只是将视图添加到屏幕时，调用startReactApplication感觉很奇怪。我是否错过了某个API或这不是目前支持的情况？

- guy.gc

Answer 1

所以显然调用startReactApplication是正确的方式。如果有人对一个更完整和有组织的解决方案感兴趣，可以看一下react-native-navigation。

- guy.gc

---

你好，我之前在应用类中启动 React Native 组件的时候一切正常，但是突然在 React Native 版本 0.64.0 中无法从应用类启动组件。我的用例只需要在后台运行 React Native，没有 UI 组件。我想从所有活动中访问它，所以我在应用程序启动时在应用类中创建了它。你能提供任何想法吗？ https://github.com/ErManishPatiyal/NativeIntegration - Manish Patiyal

https://stackoverflow.com/questions/71599216/how-to-start-a-react-native-component-from-andriod-application-class - Manish Patiyal

Answer 2

你有查看RN 官方文档关于这个主题的内容吗？

它展示了如何在使用 Java 编写的 Android 应用程序中，清晰地运行 RN 视图。

- G. Hamaide

---

文档展示了如何集成一个React视图，该视图是新应用程序的根。但是没有关于如何添加共享相同RN桥接的多个RN视图的示例（这在iOS上是可能的）。在RN GitHub页面上有一个关于此问题的开放问题。 - guy.gc