ReactNative打包

一.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);
    }
}

 

<think>好的,我现在需要帮助用户了解如何在React Native中进行应用打包。用户之前的问题是关于React Native打包教程,而系统提供的引用内容主要涉及iOS和Android的打包步骤,以及如何将RN模块集成到原生应用。我需要综合这些信息,给出清晰的步骤说明。 首先,我应该分别讲解iOS和Android的打包流程,因为两者的步骤不同。根据引用[3]和[4],iOS的打包需要生成jsbundle和资源文件,然后通过Xcode添加到项目中。而Android的打包相对简单,可以直接使用Gradle命令生成APK,如引用[5]所述。需要确保提到关键步骤,比如生成签名密钥对Android的重要性,以及iOS需要开发者账号和证书配置。 另外,用户可能对如何优化打包过程感兴趣,比如在package.json中添加脚本,如引用[3]中的示例。这部分可以作为优化步骤提到,提升用户体验。 还要注意区分开发环境和生产环境的配置,比如iOS的bundle命令中--dev false参数,引用[4]提到这一点。同时,需要提醒用户iOS打包到真机时的注意事项,如引用[4]中的终端命令。 可能用户是新手,所以步骤要详细,包括必要的命令和路径说明。同时,需要指出iOS和Android的不同之处,比如iOS需要手动处理jsbundle,而Android可以自动处理。此外,要提到签名文件对Android的重要性,避免安装失败。 最后,生成相关问题时,要考虑用户可能的后续疑问,比如如何优化打包速度、多环境配置、热更新等,这些都是打包后的常见问题。需要确保问题具有针对性,帮助用户深入理解。</think>### React Native应用打包教程 #### 一、iOS应用打包步骤 1. **生成JS Bundle与资源文件** 在项目根目录执行以下命令(可参考引用[3][^3]和引用[4][^4]): ```bash react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle ``` 该命令会将JavaScript代码和图片资源打包到`ios/bundle`目录,生成`index.ios.jsbundle`文件。 2. **XCode配置** - 打开XCode项目(`.xcodeproj`或`.xcworkspace`) - 右键项目目录选择`Add Files to [项目名]`,添加生成的`index.ios.jsbundle`和`assets`文件夹 - 在`Build Phases`中确保资源文件已被包含 3. **签名与导出IPA** - 配置开发者账号和证书(需Apple Developer账号) - 选择`Product > Archive`生成归档文件 - 通过`Distribute App`选择Ad Hoc或App Store方式导出IPA包 --- #### 二、Android应用打包步骤 1. **生成签名密钥** 使用Java密钥工具创建签名文件(首次打包必须): ```bash keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 ``` 2. **配置Gradle文件** 在`android/app/build.gradle`中添加签名配置: ```gradle android { signingConfigs { release { storeFile file('my-release-key.keystore') storePassword 'your_password' keyAlias 'my-key-alias' keyPassword 'your_password' } } buildTypes { release { signingConfig signingConfigs.release } } } ``` 3. **生成APK文件** 执行以下命令生成已签名的APK(参考引用[5][^5]): ```bash cd android && ./gradlew assembleRelease ``` 生成路径:`android/app/build/outputs/apk/release/app-release.apk` --- #### 三、打包优化建议 1. **添加快捷脚本** 在`package.json`中增加命令(如引用[3][^3]): ```json "scripts": { "bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle", "build-android": "cd android && ./gradlew assembleRelease" } ``` 2. **资源压缩** 使用`metro.config.js`配置代码压缩: ```javascript module.exports = { transformer: { minify: true, getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true } }) } }; ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值