Hot Update in React Native App with CodePush

Time:2019-10-8

Recently, I learned about CodePush hot update in React Native.

The teacher talked about two ways to achieve it, and now I’ll record them.

Compared with native development, using React Native to develop App can not only save development costs, but also do hot update functions that native development can not achieve.

When using native technology to develop App, every code change needs to be submitted to the App Store for review. After approval, it will not take effect until the user downloads and installs again. If you use React Native to develop App, developers can release new versions at any time. Without the application store’s approval, users can use the new version, and you can also force the installation of new versions without the user’s consent.

CodePush is Microsoft’s technology, because the server is abroad, so it’s not very stable. If the developed App is targeted at the domestic market, CodePush China should be used.

To use CodePush, you need to install the cpcn-react-native dependency package. Dependency packages can be installed using the official tool cpcn-client. The download address of cpcn-client is http://code-push.cn/docs/1010.htm.

Code implementation is relatively simple. The first approach is to change App.js components directly:

import cpcn from 'cpcn-react-native';

class App  extends Component {
    
}

App = cpcn(App);

export default App;

This method uses the default prompt box when a new version is updated, and the text in the prompt box is also default. Not enough flexibility.

The second method is flexible and can customize dialog boxes and progress bars. This method uses the cpcn. check () method.

import cpcn from "cpcn-react-native";

class App extends Component {
    componentDidMount(){
        cpcn.check({
            checkCallback: (remotePackage, agreeContinueFun) => {
                if(remotePackage){

                }
            },
            downloadProgressCallback: (downloadProgress) => {

            },
            installedCallback: (restartFun) => {

            }
        });
    }
}

export default App;

Write the cpcn. Check() method in the componentdidmount method of app.js, and call this method when the app component is loaded.

The parameters of the cpcn.chedk() method are as follows:

checkCallbackThis method is called after checking whether there is an updateable version. If remotePackage is not null, it means that there is an updateable version. If you want to continue updating, call agreeContinueFun (true), and if you don’t want to continue updating, call agreeContinueFun (false).

downloadProgressCallbackCall this method in the process of downloading the new version. You can use its parameter download Progress as a progress bar. Download Progress. receivedBytes is the number of bytes that have been downloaded, and download Progress. total Bytes is the total number of bytes.

installedCallbackCall this method when the new version is installed. You need to call restart Fun (true) to restart App, and the new version will take effect after restart.