Project background: Android App for manual link
1. Download react-native-code-push
npm install --save react-native-code-push
2. Added in android/file:
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(, '../node_modules/react-native-code-push/android/app')
3. In android\app\src\main\java\com\app\Modify in the file
... // 1. Import the plugin class. import ; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { ... // 2. Override the getJSBundleFile method in order to let // the CodePush runtime determine where to get the JS // bundle location from on each app start @Override protected String getJSBundleFile() { return (); } // Where manual link needs to be modified, automatic link should not be modified. @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for // example: // (new MyReactNativePackage()); (new CodePush(getResources().getString(), getApplicationContext(), , getResources().getString(.reactNativeCodePush_androidServerURL))); return packages; } }; } //CodePushDeploymentKey corresponding to the name of the Deployment key in//reactNativeCodePush_androidServerURLCorresponding to the hot update service address insidename
Modification: First, add your app to the push center and get the key of the environment branch you need
4.1. Log in to the hot update server
4.2. Push Center Creation Project: (For the first deployment)
code-push app add project name android react-native
4.3 Add environment branch dev: code-push deployment add project name dev (for the first deployment)
To package the project to the corresponding environment branch, you need to configure the key and hot update addresses of the environment branch to the project file: ()
4.4 The preparation work has been done, let’s modify the file now
... apply from: "../../node_modules/react-native/" apply from: "../../node_modules/react-native-code-push/android/" ... dependencies { implementation project(':react-native-code-push') //It is best to add it manually, otherwise there may be pitfalls implementation fileTree(dir: "libs", include: ["*.jar"]) .... } ....
5. Modify android/app/file
STACK TRACE AND/OR SCREENSHOTS :app:compileDebugJavaWithJavac - is not incremental (. outputs have changed, no previous execution, etc.). C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:6: error: package does not exist import ; ^ C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:23: error: cannot find symbol return (); ^ symbol: variable CodePush C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:35: error: cannot find symbol new CodePush(null, getApplicationContext(), ), ^ symbol: class CodePush 3 errors :app:compileDebugJavaWithJavac FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:compileDebugJavaWithJavac'. > Compilation failed; see the compiler error output for details.
Caitou: react-native-code-push needs to be added manually, otherwise an error will be reported:
STACK TRACE AND/OR SCREENSHOTS
:app:compileDebugJavaWithJavac - is not incremental (. outputs have changed, no previous execution, etc.).
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:6: error: package does not exist
import ;
^
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:23: error: cannot find symbol
return ();
^
symbol: variable CodePush
C:\Stock Api\stock_app\android\app\src\main\java\com\stock_app\:35: error: cannot find symbol
new CodePush(null, getApplicationContext(), ),
^
symbol: class CodePush
3 errors
:app:compileDebugJavaWithJavac FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
6. Chuangpit: Manually link react-native-code-push app, autolink needs to be disabled, otherwise an error will be reported:
: Native module CodePush tried to override CodePushNativeModule. Check the getPackages() method in , it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true
So you need to add a configuration file to prohibit automatic linking
Create a file in the project root directory
= { dependencies: { 'react-native-code-push': { platforms: { android: null, // disable Android platform, other platforms will still autolink }, }, }, };
7. The hot update configuration is completed. Now we need to detect the hot update when the project is started and prompt
In the project entry file:
import React,{ Component } from 'react'; import Root from './src/inner'; import configureStore from './src/inner/store'; import UpdateDialog from './src/common/components/updateDialog' import CodePush from "react-native-code-push"; const { persistor, store } = configureStore(); class App extends Component { state = { visitDialog: false, current: 0, total: 100 } componentDidMount() { ({ //Installation mode //ON_NEXT_RESUME Next time you restore to the foreground //ON_NEXT_RESTART The next time you restart //IMMEDIATE Update now installMode: , //Dialogue updateDialog: { // Whether to display the update description appendReleaseDescription: true, //Update the prefix of the description. Default is "Description" descriptionPrefix: "Update content:", //Forced update button text, default is continue mandatoryContinueButtonLabel: "Update now", //Information during forced update. The default is "An update is available that must be installed." mandatoryUpdateMessage: "It must be updated to use", //When the button text is not forced to update, the default is "ignore" optionalIgnoreButtonLabel: 'Later', //Confirm button text when not forced to update. Default is "Install" optionalInstallButtonLabel: 'Background update', //When not forced update, the updated message text is checked optionalUpdateMessage: 'There is a new version, is it updated? ', //Title of Alert window title: 'Update prompt' }, }, (status) => { (status, 'status') if (status == 7) { ({ visitDialog: true }) } }, (progress) => { let receivedBytes = / 1024 / 1024; let totalBytes = / 1024 / 1024; ({ current: receivedBytes, total: totalBytes }) if (receivedBytes === totalBytes) { setTimeout(() => { ({ visitDialog: false }) }, 1000) } (progress, 'progress') } ); } render() { (, 'visitDialog'); return ( <> <Root store={store} persistor={persistor} /> { && <UpdateDialog title={ === ? 'Completed' : 'Downloading update file'} describe={ === ? 'Welcome' : 'Please wait'} current={} total={}></UpdateDialog>} </> ) } }; let codePushOptions = { //Set the frequency of checking updates //ON_APP_RESUME APP is restored to the foreground //ON_APP_START When the APP is turned on //MANUAL Manual inspection checkFrequency: .ON_APP_START }; export default CodePush(codePushOptions)(App);
UpdateDialog: It is a component of the hot update download progress bar that I encapsulated myself. The download prompt can be written casually according to my own mood. I will not post my own code here! (I'm sorry to write)
Now we have hot update configuration, and package the official apk!
1. Generate a signature file: Run the command in the project root directory:
keytool -genkey -v -keystore My signature - -keyalg RSA -keysize 2048 -validity 10000 -alias My signature
2. Copy the generated signature file to the directory: android/app directory
3. Configuration
=true =true MYAPP_RELEASE_STORE_FILE= //The generated signature keyMYAPP_RELEASE_KEY_ALIAS=ydh //AliasMYAPP_RELEASE_STORE_PASSWORD=Password set when signing MYAPP_RELEASE_KEY_PASSWORD=Password set when signing
4. Modify android/app/
signingConfigs { debug { ... } release { if (('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 } } }
5..Packaging (under the Android directory): .\ assembleRelease
The app is successfully packaged, copy the apk to your mobile phone to install
6..Push code: (When it needs to be updated, push the code to the environment branch you want to update)
Push to the dev environment: code-push release-react Project name android -d dev
Push to the production environment:-m true means force update, no addition means no force update
code-push release-react project name android -d Production -m true
Then restart the app and you will see the update prompt
Summarize
This is the end of this article about React Native implementing hot updates and automatically signing and packaging. For more related React Native signature packaging content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!