Taro的离线打包步骤

1,431 阅读2分钟

打包apk

taro项目代码转rn在真机上显示

使用命令创建模板项目

  1. taro init myApp
  2. 使用 yarn 安装依赖 或者npm安装依赖 npm install

编译rn项目

  • yarn dev:rn

下载rn需要的壳子项目代码

git clone git@github.com:NervJS/taro-native-shell.git

  • cd到taro-native-shell,使用 yarn 或者 npm install 安装依赖。

启动壳子到真机上

react-native run-android

会出现以下报错信息:

 What went wrong:
Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
> Could not find com.github.yalantis:ucrop:2.2.2-native.
  Searched in the following locations:
    - file:/Users/git/Library/Android/sdk/extras/m2repository/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.pom
    - file:/Users/git/Library/Android/sdk/extras/m2repository/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.jar
    - file:/Users/git/Library/Android/sdk/extras/google/m2repository/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.pom
    - file:/Users/git/Library/Android/sdk/extras/google/m2repository/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.jar
    - file:/Users/git/Library/Android/sdk/extras/android/m2repository/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.pom
    - file:/Users/git/Library/Android/sdk/extras/android/m2repository/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.jar
    - file:/Users/git/.m2/repository/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.pom
    - file:/Users/git/.m2/repository/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.jar
    - https://dl.google.com/dl/android/maven2/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.pom
    - https://dl.google.com/dl/android/maven2/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.jar
    - https://jcenter.bintray.com/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.pom
    - https://jcenter.bintray.com/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.jar
    - file:/Users/git/taro-native-shell/node_modules/react-native/android/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.pom
    - file:/Users/git/taro-native-shell/node_modules/react-native/android/com/github/yalantis/ucrop/2.2.2-native/ucrop-2.2.2-native.jar
  Required by:
      project :app > project :react-native-image-crop-picker
  • 在Android项目下build.gradle中的
allprojects{
repositories{
...
 	}
 }

中添加

 maven { 
         url "https://jitpack.io" 
     }
     maven {
         url 'https://maven.google.com/'
         name 'Google'
     }  

添加完成后 重新执行react-native run-android

报错的话把android中java 中的MainActivity中的return返回值根据rn_temp中的app.json中的项目名修改

在设备上运行成功后就是真机显示

rn离线包生成Android Apk

步骤如下

先生成密钥

  • 密钥连接https://reactnative.cn/docs/signed-apk-android
  • 密钥生成指令
keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
  • 把my-release-key.keystore文件放到你工程中的android/app文件夹下

  • 在/android/gradle.properties中添加 *号换成你的密钥密码

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

把签名配置加入到项目的 gradle 配置中

  • 在这个代码下添加
release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
  • 在后面添加一句代码

signingConfig signingConfigs.release

把自己创建项目下生成的rn_temp文件复制到壳子的android文件夹下

修改MainApplication中返回值

@Override
    protected String getBundleAssetName()  {
      return "./android/rn_temp/index";
    }
  };

在android/app/build.gradle中修改添加

project.ext.react = [
        entryFile: "android/rn_temp/index.js",
        cliPath:"node_modules/react-native/cli.js"
]

执行指令生成index.bundle

node ./node_modules/react-native/local-cli/cli.js bundle --entry-file ./android/rn_temp/index.js --bundle-output ./android/rn_temp/index.bundle --assets-dest ./rn_bundle --dev false

cd到 android

  • 执行打包指令 ./gradlew assembleRelease
  • 执行后会显示缺少的依赖并且报错,逐步添加缺少的依赖 yarn add + 报错信息中Cannot resolve的后面提示的依赖
  • 在执行打包指令./gradlew assembleRelease,apk在android/app/build/outputs中