首先,咱们使用使用命令建立模板项目,建立的命令以下。javascript
taro init myApp
而后,使用 yarn 或者 npm install安装依赖包,并使用下面的命令编译Taro项目。java
yarn dev:rn
启动后会开启一个监听的进程,以下图。node
不过,细心的你可能会发现,使用taro init命令初始化的项目是没有原生模块支持的,原来Taro使用了一个壳子工程,首先使用下面的命令下载壳子工程taro-native-shell,以下所示。react
git clone git@github.com:NervJS/taro-native-shell.git
在taro-native-shell个目录使用 yarn 或者 npm install 安装依赖,并使用下面的命令启动壳子工程。android
react-native run-android
不过,启动后报了以下的错误:git
error: bundling failed: NotFoundError: Cannot find entry file index.js in any of the roots: ["/Users/mac/Taro/work/taro-yanxuan"] at DependencyGraph.getAbsolutePath (/Users/mac/Taro/work/taro-yanxuan/node_modules/metro/src/node-haste/DependencyGraph.js:317:11) at /Users/mac/Taro/work/taro-yanxuan/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:280:416 at Generator.next (<anonymous>) at step (/Users/mac/Taro/work/taro-yanxuan/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:11:445) at /Users/mac/Taro/work/taro-yanxuan/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:11:605 at processTicksAndRejections (internal/process/task_queues.js:97:5)
在网上找了下,找到以下一篇帖子:taro-native-shell 壳子,android studio 启动报错。
上面报错的意思是找不到RN的入口文件index.js。对于这个问题,只须要将 MainApplication.java 里面的 getJSMainModuleName 修改改成:rn_temp/index
便可,由于Taro打的包在rn_temp目录下,最新的 react-native-shell 已修复。github
修改后,从新执行react-native run-android
命令。不过,因为项目是0.60.0版本如下的,因此我在运行的时候又报了下面的错误。shell
React Native version mismatch javascript version 0.55.4 Native version 0.64.0
这是由于react-native-shell 是0.64.0,而个人RN项目是0.55.4,因此只能升级RN项目或者降级
react-native-shell 。若是没有任何错误,接下来就能够制做离线的apk包了。
首先,你须要生成Android的密钥文件,关于如何生成密钥文件,能够自行查找相关的资料,把生成的密钥文件拷贝到工程中的android/app文件夹中。而后,在在/android/gradle.properties中添加以下常量代码。npm
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=*****
而后,在app/build.gradle文件中添加以下代码。react-native
release { if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) { storeFile file(MYAPP_UPLOAD_STORE_FILE) storePassword MYAPP_UPLOAD_STORE_PASSWORD keyAlias MYAPP_UPLOAD_KEY_ALIAS keyPassword MYAPP_UPLOAD_KEY_PASSWORD } }
接下来,把前面生成的rn_temp文件复制到taro-native-shell壳子工程的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
最后,在Android的根目录下执行打包命令。
./gradlew assembleRelease
打包完成后,就能够在android/app/build/outputs中看到签名包。