ReactNative Android/iOS 打包详情流程

Android 端打包

• 1. 使用 keytool 生成签名(也可以使用 androidstudio 生成签名)

      keytool -genkey -v -keystore mm.keystore -alias mm -keyalg RSA -keysize 2048 -validity 10000
     

• 2. 配置签名文件

  • 把签名文件发到 项目名/android/app 目录下

  • 在 android/gradle.properties 中加入

    MYAPP_RELEASE_STORE_FILE=mm.keystore
    MYAPP_RELEASE_KEY_ALIAS=mm
    MYAPP_RELEASE_STORE_PASSWORD=12345678 
    MYAPP_RELEASE_KEY_PASSWORD=12345678
    

  • 在 android/app/build.gradle 添加

    android {
      ……
      signingConfigs {
          debug {
              storeFile file(MYAPP_RELEASE_STORE_FILE)
              storePassword MYAPP_RELEASE_STORE_PASSWORD
              keyAlias MYAPP_RELEASE_KEY_ALIAS
              keyPassword MYAPP_RELEASE_KEY_PASSWORD
          }
          release {
              storeFile file(MYAPP_RELEASE_STORE_FILE)
              storePassword MYAPP_RELEASE_STORE_PASSWORD
              keyAlias MYAPP_RELEASE_KEY_ALIAS
              keyPassword MYAPP_RELEASE_KEY_PASSWORD
          }
      }
      buildTypes {
          release {
              signingConfig signingConfigs.release
              minifyEnabled enableProguardInReleaseBuilds
              proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
          }
      }
    }
    

• 3. 执行打包命令(apk 输出目录 项目名/android/app/outputs/apk)

      cd android & ./gradlew assembleRelease
     

iOS 端打包

• 1. 在 项目名/ios 目录下添加 bundle 文件

• 2. 为了方便打包，将打包命令配置到 项目名/package.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"
        },
      }
     

• 3. 执行 npm run bundle-ios 命令打包

      在 项目名/ios/bundle 目录下，会自动新建以下文件
         index.ios.jsbundle //离线js包
        index.ios.jsbundle.meta
        assets //资源文件夹，如果使用离线的 html 文件，
              //打包的时候只会识别到js文件引用的文件，而 html 中引用的文件时不会打包到 assets 文件中，所以需要手动引用进来
     

• 4. 将 bundle 文件添加到项目里

  • 打开 Xcode ，选中跟项目同名的那个文件夹，右键，选中‘Add Files to ..’选项

  • 选择第一步新建的 bundle 文件夹，点击options，勾选 Create folder references 选项

  • 将 bundle 文件添加到项目里（Xcode 中显示文件夹是蓝色的）

• 5. 在 AppDelegate.m 中配置加载包的方式

      NSURL *jsCodeLocation;
      #ifdef DEBUG //debug
        jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
      #else //relese
        jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
      #endif
     

• 6. 准备好开发者账号，环境配置好，具体请看xcode打包IPA上传App Store完整流程
• 7. 配置 Xcode ，打包 （以下和 iOS 原生打包一样）

  • 修改为 release 模式，(Xcode-->Product-->Scheme-->Edit Scheme... 把 debug 改为 relese)

  • 选择 Generic iOS Device ,修改 Version 和 Build

  • 打包 (Xcode-->Product-->Archive 看提示操作)

ReactNative 常用命令

注：有一些控制台命令需要加上 ./ 有些不需要 （gradlew clean ./gradlew clean），//项目根目录

命令	作用	平台
yarn / npm install	根据 package.json 更新 node_mofules (更新依赖)	Android/iOS
./gradlew clean	清除缓存（需要 cd android 到目录）	Android
./gradlew assembleRelease	打包apk （需要 cd android 到目录）	Android
yarn add xxx / npm install xxx	加入第三方库	Android/iOS
react-native link xxx	添加库需要的配置	Android/iOS
react-native run-android	运行调试Android	Android
react-native run-ios	运行调试iOS	iOS
react-native init xxx	新建项目	Android/iOS