First, we create the template project using the use command, created as follows.

taro init myApp

Then, use yarn or NPM install to install the dependent packages and compile the Taro project using the following command.

yarn dev:rn

This will start a listening process, as shown in the figure below.

However, if you look carefully, you may notice that the project initialized with the taro init command is not supported by the native module. It turns out that taro uses a shell project. First download the shell project taro-native shell using the following command, as shown below.

git clone [email protected]:NervJS/taro-native-shell.git

Install the dependencies in the taro-native-shell directory with yarn or NPM install and start the shell project with the following command.

react-native run-android

However, the following error is reported after startup:

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 shell, Android Studio startup error reported. Cannot find index.js entry file for RN. To solve this problem, simply change the getJsmainModuleName in MainApplication.java to: Rn_temp /index is OK, because Taro is in rn_temp directory, the latest react-native-shell has been fixed.

After the modification, re-execute the react-native run-android command. However, since the project is under version 0.60.0, I report the following error at runtime.

React Native version mismatch

javascript version 0.55.4
Native version 0.64.0

This is because the React-native-shell is 0.64.0 and my RN project is 0.55.4, so I can only upgrade the RN project or downgrade the React-native-shell. If there are no errors, it’s time to make an offline APK package. First of all, you need to generate the Android key file. As for how to generate the key file, you can find the relevant information by yourself and copy the generated key file to the Android/App folder in the project. Then, in the/android/gradle. Add the following constants code properties.

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

Then, add the following code in the app/build.gradle file.

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
            }
        }

Next, copy the previously generated rn_temp file into the Taro-Native-Shell Shell project’s Android folder and modify the code in MainApplication, as shown below.

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

Then add the following code in Android /app/build.gradle.

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

Then, execute the following command to generate the index.bundle file, as shown below.

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

Finally, execute the packaging command in the Android root directory.

./gradlew assembleRelease

After the completion of the packaging, you can see in android/app/build/outputs signature packages.