将单个React Native视图添加到现有Android应用程序的正确方法是什么?

Guy.gc

我正在处理一个现有的大型Android和iOs项目,我的团队希望采用本机响应。首先,我们希望在RN中实现一个功能,因为我们没有能力立即迁移整个项目。

我已经成功地从本地节点服务器和位于Assets文件夹中的JS捆绑文件中成功添加了RN视图,但是感觉有些不客气。我知道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"
    }
}

这是一个完整的技巧。startReactApplication当我实际上在做的只是在屏幕上添加视图时,打电话给我感觉很尴尬。我是否缺少API或尚不支持此方案?

Guy.gc

因此,显然致电startReactApplication确实是正确的方法。如果有人对更完整,更有条理的解决方案感兴趣,可以看看react-native-navigation

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将引导程序添加到symfony应用程序的正确方法是什么?

无法将 React-Native 添加到现有应用程序

将 ruby on rails 添加到现有的 React Native 应用程序

将react-native-web添加到现有的react-native应用程序时出错

将初始化代码添加到Spring Boot应用程序的正确方法是什么?

将Redux添加到现有的React应用程序

将TypeScript添加到现有的create-react-app应用程序

如何将 React 添加到现有的 Electron 应用程序中?

是否可以将Xamarin.forms代码作为库添加到现有的Native Android Studio应用程序中?

将特定于视图的 JavaScript 添加到 Asp.Net Core 2 MVC 应用程序的首选方法是什么?

将Rails后端添加到JS / HTML / CSS应用程序中时,正确的文件位置是什么?

如何将数据添加到我的Android应用程序中的现有数据库?

将 PWA 添加到现有应用程序。有好处吗?

是否有将 Uno 3 添加到现有 UWP 应用程序的指南?

将新字段添加到 MVVM 应用程序中 ViewModel 的模型集合中的最佳方法是什么?

将背景音乐添加到 Swift iOS 应用程序的最简单方法是什么?

如何将Android应用程序添加到iOS应用程序中已在使用的现有Firebase项目中?

将GWT添加到现有的Maven Web应用程序

将[hazelcast-jet]添加到现有应用程序

如何将 vuetify 对话框添加到现有应用程序中?

如何将平台添加到现有Flutter应用程序/项目中?

使用 .Net 4 将 MVC 项目添加到现有的 Web 应用程序

如何将LiveView添加到现有的Elixir / Phoenix应用程序?

将Angular应用程序添加到现有项目

尝试将 @ionic/angular 添加到现有的 angular 12 应用程序失败

将vueJS添加到现有的angular应用程序中

将websockets添加到现有的php应用程序

将刺激和导入映射添加到现有的 Rails 6.1 应用程序

将MeteorJS添加到现有的AngularJS / MEAN堆栈应用程序