ReactNative打包

最新推荐文章于 2024-05-10 19:01:31 发布

原创最新推荐文章于 2024-05-10 19:01:31 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

ReactNative 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在React Native项目中动态加载iOS和Android平台的bundle文件，包括配置react-native-bundle命令，以及通过RNActivity类实现不同场景下bundle文件的加载流程。

一.IOS平台：

react-native bundle --entry-file index.js --bundle-output ./out/xxxxxx.jsbundle --platform ios --assets-dest ./out --dev false

二.android平台：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ --verbose

动态加载bundle文件

package com.workstation.container.activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.KeyEvent;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactInstanceManagerBuilder;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
import com.workstation.BuildConfig;
import com.workstation.container.util.FileConstant;
import com.workstation.container.MyApplication;
//import com.workstation.container.module.PlateModulePackage;

import org.reactnative.camera.RNCameraPackage;

/**
 * 加载RN的类
 */
public class RNActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private final static String TAG = "RNUpdate";

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
//    ReactInstanceManagerBuilder builder;
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MyApplication.mRNActivity = this;
//
//        String path = FileConstant.getFilePath();
//        File file = new File(path);
//        if(file.exists()){
//            loadFromSDCard();
//        }else{
//            loadFromAccess();
//        }

        loadFromAccess();

    }

    private void loadFromAccess(){

        Intent intent=getIntent();
        int flag = intent.getIntExtra("flag", 0);

        mReactRootView = new ReactRootView(this);

        ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
//                .addPackage(new PlateModulePackage())
                .addPackage(new RNCameraPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED);
        if(flag == 0){
            builder.setBundleAssetName("index.android.bundle");
        }else{
//            builder.setBundleAssetName("firstrn.android.bundle");
        }
        mReactInstanceManager = builder.build();
        // 注意这里的MyReactNativeApp必须对应“index.js”中的
        // “AppRegistry.registerComponent()”的第一个参数

        if(flag != 0){
            mReactRootView.startReactApplication(mReactInstanceManager, "fruit", null);
        }else{
            mReactRootView.startReactApplication(mReactInstanceManager, "samsrn_leave", null);
        }
        setContentView(mReactRootView);

    }

    private void loadFromSDCard(){

        Intent intent=getIntent();
        int flag = intent.getIntExtra("flag", 0);

        mReactRootView = new ReactRootView(this);

        ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
//                .addPackage(new PlateModulePackage())
                .addPackage(new RNCameraPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED);
//                .setJSBundleFile(FileConstant.path);

        if(flag == 0){
//            builder.setJSBundleFile(FileConstant.getFilePath() + "firstrn.android.bundle");
            builder.setJSBundleFile(FileConstant.getCameraPath() + "index.android.bundle");
        }else{
            builder.setJSBundleFile(FileConstant.getFilePath2() + "index.android.bundle");
        }

        mReactInstanceManager = builder.build();

        // 注意这里的MyReactNativeApp必须对应“index.js”中的
        if(flag != 0){
            //fruit
            mReactRootView.startReactApplication(mReactInstanceManager, "xxx", null);
        }else{
            mReactRootView.startReactApplication(mReactInstanceManager, "samsrn_leave", null);
        }
        setContentView(mReactRootView);

        //为了在运行中重新加载bundle文件，查看ReactInstanceManager的源码，找到如下方法：
//        mReactInstanceManager.recreateReactContextInBackground();

    }

    // 如果bundle在sd卡【 比如bundle在file://sdcard/react_native_update/index.android.bundle 那么图片目录在file://sdcard/react_native_update/drawable-mdpi】
    // 如果你的bundle在assets里，图片资源要放到res文件夹里,例如res/drawable-mdpi
   /* private void iniReactRootView(boolean isRelease) {
        Log.i("ReactNativeJS",">>>react react start:"+System.currentTimeMillis());
        File file = new File(FileConstant.path);
        if (isRelease && file != null && file.exists()) {
            mReactInstanceManager = ReactInstanceManager.builder()
                    .setCurrentActivity(this)
                    .setApplication(getApplication())
//                    .setJSMainModuleName(FileConstant.JS_BUNDLE_LOCAL_FILE) //没有了
                    .setJSMainModulePath("index")
                    .addPackage(new MainReactPackage())
//                    .addPackage(new MyReactPackage())
                    .setInitialLifecycleState(LifecycleState.RESUMED)
                    .setJSBundleFile(FileConstant.path) //bundle的位置
                    .build();
            Log.i(TAG, "load bundle from local cache");
        }
        else {
            mReactInstanceManager = ReactInstanceManager.builder()
                    .setCurrentActivity(this)
                    .setApplication(getApplication())
//                    .setJSMainModuleName(FileConstant.JS_BUNDLE_LOCAL_FILE)
                    .setJSMainModulePath("index")
                    .addPackage(new MainReactPackage())
//                    .addPackage(new MyReactPackage())
                    .setInitialLifecycleState(LifecycleState.RESUMED)
                    .setBundleAssetName(FileConstant.JS_BUNDLE_LOCAL_FILE)
                    .build();
            Log.i(TAG, "load bundle from asset");
        }

        mReactRootView = new ReactRootView(this);
        mReactRootView.startReactApplication(mReactInstanceManager, "FirstModel", null);

        setContentView(mReactRootView);
        Log.i("ReactNativeJS", ">>>react react end:"+System.currentTimeMillis());
    }*/

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

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

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

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

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

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

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}