One of the advantages of ReactNative is that it can be hot updated. There are many application scenarios requiring hot update, such as:
- The audit time of major application markets is too long
- Some heavy business logic pages that often need to be updated
- A relatively large App, which may be responsible for each piece by a department, cannot be pushed to a new version as soon as each department changes.
- When app s go to cdn on their own platform, they need to consider the cost of traffic
Now let's talk about how to access CodePush in ReactNative project. If the English partner returns ok, he can directly follow the English document. Document address.
CodePush
- Update user deployment code directly
- Managing Alpha, Beta and Production Environment Applications
- Support React Native and Cordova
- Support updates of JavaScript files and image resources
Install CodePush CLI
Enter commands at the terminal: NPM install-g code-push-cli
Creating CodePush Account
Enter the command at the terminal: code-push register
After the command is entered, a web page will pop up. We can register our account on it or log in directly with GitHub. After login, the web page will return us a key. We can paste this key back to the command line.
Sign in
Login: code-push login
Other related commands: code-push logout
List token: code-push access-keys for login
Delete a key: code-push access-key RM < access key >
Register app with CodePush
Android and ios need to be registered twice:
code-push app add MyApp-Android code-push app add MyApp-ios
The key will be returned after registration. We need to save this key.
Integrating CodePush SDk into a project
Run in the project's root directory: npm install --save react-native-code-push
Running in the Android directory: npm i -g rnpm // Generally speaking, our React will have it, after V0.27
Add a configuration file to Android: rnpm link react-native-code-push
In the process of running this command, it lets us enter the key, which is the one we just saved. Of course, it can also be done without entering it.
Configuring the Android Project
You need to check in android/app/build.gradle for the following, and if not add:
apply from: "../../node_modules/react-native/react.gradle" apply from: "../../node_modules/react-native-code-push/android/codepush.gradle" ... dependencies { ... compile project(':react-native-code-push') }
You need to check in android/settings.gradle for the following, and if not add:
include ':app', ':react-native-code-push' project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
Get the deployed secret key
Run: code-push deployment LS Daily-k
Configuration
Add the following code in MainApplication.java:
... // 1. Import the plugin class. import com.microsoft.codepush.react.CodePush; 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 CodePush.getJSBundleFile(); } @Override protected List<ReactPackage> getPackages() { // 3. Instantiate an instance of the CodePush runtime and add it to the list of // existing packages, specifying the right deployment key. If you don't already // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key. return Arrays.<ReactPackage>asList( new MainReactPackage(), new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG) ); } }; }
... // 1. Declare your ReactNativeHost to extend ReactInstanceHolder. ReactInstanceHolder is a subset of ReactNativeHost, so no additional implementation is needed. import com.microsoft.codepush.react.ReactInstanceHolder; public class MyReactNativeHost extends ReactNativeHost implements ReactInstanceHolder { // ... usual overrides } // 2. Provide your ReactNativeHost to CodePush. public class MainApplication extends Application implements ReactApplication { private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this); @Override public void onCreate() { CodePush.setReactInstanceHolder(mReactNativeHost); super.onCreate(); } }
That's all.
If you encounter any problems, please give me a question.