RN升级配置说明

react-native-updater-client

About

React Native 热更新插件

更新配置文件

{
  "version": "0.0.1",
  "encrypt": false,
  "min_app_version": "0.0.0",
  "ios_md5": "7e861bdbbeb2e1cd5e13e102e38b59c0",
  "update_log": "升级测试!!!",
  "ios_url": "NA",
  "ios_size": 106644,
  "proto_ver": "1.0"
}
  • version — 更新版本号
  • encrypt — 是否编码
  • min_app_version — 最小更新版本(若app版本小于最小更新版本,则不更新)
  • ios_md5 OR android_md5 — md5校验
  • update_log — 更新日志
  • ios_url OR android_url — 更新文件下载url
  • ios_size OR android_size — 更新文件大小
  • proto_ver — 协议版本号

Screenshots

Here's a GIF'ed screencast of react-native-updater-client in action.

rn-auto-updater

RN升级配置说明_第1张图片
rn-auto-updater-android

Installation

NOTE — ReactNativeUpdaterClient requires a minimum version of 0.18 of React Native.

iOS

  1. package.json add "react-native-updater-client": "git+http://192.111.110.19/ReactNative/RNUpdaterClient.git"
  2. In the Xcode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to "Your Project Name"
  3. Go to node_modulesreact-native-updater-clientiOS ➜ select ReactNativeUpdaterClient.xcodeproj
  4. In the Xcode Project Navigator, click the root project, and in General tab, look for Linked Frameworks and Libraries. Click on the + button at the bottom and add libReactNativeUpdaterClient.a from the list.
  5. Go to Build Settings tab and search for Header Search Paths. In the list, add $(SRCROOT)/../node_modules/react-native-updater-client and select recursive.
  6. Go to Build Settings tab and search for Dead Code Stripping, find Release and change to No.

Android

  1. In android/settings.gradle, add this

    // more stuff
    include ':ReactNativeAutoUpdater', ':app'
    project(':ReactNativeAutoUpdater').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-auto-updater/android')
    
  2. In android/app/build.gradle, add this

     // more stuff
     dependencies {
       // more dependencies
       compile project(':ReactNativeAutoUpdater')
     }
    
  3. In android/app/build.gradle, add this

android {
  // more stuff
  // add this
  packagingOptions {
    exclude 'META-INF/LICENSE.txt'
    exclude 'META-INF/NOTICE.txt'
  }
}

Usage

iOS

In your AppDelegate.m (make sure you complete step #5 from installation above, otherwise Xcode will not find the header file)

#import "ReactNativeUpdaterClient.h"

The code below essentially follows these steps.

  1. Get an instance of ReactNativeUpdaterClient
  2. Set self as a delegate
  3. Initialize with updateMetadataUrl , defaultJSCodeLocation
  4. Make a call to checkUpdate, checkUpdateDaily or checkUpdateWeekly
  5. Don't forget to implement the delegate methods (optional)
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // defaultJSCodeLocation is needed at least for the first startup
  NSURL* defaultJSCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  ReactNativeUpdaterClient* updater = [ReactNativeUpdaterClient sharedInstance];
  [updater setDelegate:self];

  // We set the location of the metadata file that has information about the JS Code that is shipped with the app.
  // This metadata is used to compare the shipped code against the updates.

  [updater initializeWithUpdateMetadataUrl:[NSURL URLWithString:JS_CODE_METADATA_URL]
                     defaultJSCodeLocation:defaultJSCodeLocation];
  [updater setHostnameForRelativeDownloadURLs:@"https://www.aerofs.com"];
  [updater checkUpdate];

  NSURL* latestJSCodeLocation = [updater latestJSCodeLocation];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  self.window.rootViewController = rootViewController;
  RCTBridge* bridge = [[RCTBridge alloc] initWithBundleURL:url moduleProvider:nil launchOptions:nil];
    RCTRootView* rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"ReactNativeUpdaterClient" initialProperties:nil];
    self.window.rootViewController.view = rootView;
  [self.window makeKeyAndVisible];
  return YES;
}

If you want, you can ask the user to apply the update, right after an update is downloaded. To do that, implement the delegate methods. Check the Example app to see a working sample.

react-native-updater-client is highly configurable. Here are the options you can configure

ReactNativeUpdaterClient *updater = [ReactNativeUpdaterClient sharedInstance];
/* Show progress during the udpate 
 * default value - YES
 */
[updater showProgress: NO]; 

/* Allow use of cellular data to download the update 
 * default value - NO
 */
[updater allowCellularDataUse: YES];

/* Decide what type of updates to download
 * Available options - 
 *  ReactNativeAutoUpdaterMajorUpdate - will download only if major version number changes
 *  ReactNativeAutoUpdaterMinorUpdate - will download if major or minor version number changes
 *  ReactNativeAutoUpdaterPatchUpdate - will download for any version change
 * default value - ReactNativeAutoUpdaterMinorUpdate
 */
[updater downloadUpdatesForType: ReactNativeAutoUpdaterMajorUpdate];

/* Check update right now
*/
[updater checkUpdate];

/* Check update daily - Only check update once per day
*/
[updater checkUpdateDaily];

/* Check update weekly - Only check updates once per week
*/
[updater checkUpdatesWeekly];

/*  When the JSON file has a relative URL for downloading the JS Bundle,
 *  set the hostname for relative downloads
 */
[updater setHostnameForRelativeDownloadURLs:@"https://www.aerofs.com/"];

Android

  1. Import the needed classes

    import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdater;
    import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdater.ReactNativeAutoUpdaterUpdateType;
    import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdater.ReactNativeAutoUpdaterFrequency;
    import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdaterActivity;
    import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdaterPackage;
    
    import javax.annotation.Nullable;
    
  2. Extend your MainActivity.java from ReactNativeAutoUpdaterActivity instead of ReactActivity

    
    public class MainActivity extends ReactNativeAutoUpdaterActivity {
    
    
  3. Implement the required methods

    
     /**
      *  Name of the JS Bundle file shipped with the app.
      *  This file has to be added as an Android Asset.
      * */
     @Nullable
     @Override
     protected String getBundleAssetName() {
         return "main.android.jsbundle";
     }
    
     /**
      *  URL for the metadata of the update.
      * */
     @Override
     protected String getUpdateMetadataUrl() {
         return "https://www.aerofs.com/u/8691535/update.android.json";
     }
    
     /**
      * Name of the metadata file shipped with the app.
      * This metadata is used to compare the shipped JS code against the updates.
      * */
     @Override
     protected String getMetadataAssetName() {
         return "metadata.android.json";
     }
    
  4. (Optional) Implement the optional methods

     /**
      *  If your updates metadata JSON has a relative URL for downloading 
      *  the JS bundle, set this hostname.
      * */
     @Override
     protected String getHostnameForRelativeDownloadURLs() {
         return "https://www.aerofs.com";
     }
    
     /**
      *  Decide what type of updates to download.
      * Available options - 
      *  MAJOR - will download only if major version number changes
      *  MINOR - will download if major or minor version number changes
      *  PATCH - will download for any version change
      * default value - PATCH
      * */
     @Override
     protected ReactNativeAutoUpdaterUpdateType getAllowedUpdateType() {
         return ReactNativeAutoUpdater.ReactNativeAutoUpdaterUpdateType.MINOR;
     }
    
     /**
      *  Decide how frequently to check for updates.
      * Available options - 
      *  EACH_TIME - each time the app starts
      *  DAILY     - maximum once per day
      *  WEEKLY    - maximum once per week
      * default value - EACH_TIME
      * */
     @Override
     protected ReactNativeAutoUpdaterFrequency getUpdateFrequency() {
         return ReactNativeAutoUpdaterFrequency.EACH_TIME;
     }
    
     /**
      *  To show progress during the update process.
      * */
     @Override
     protected boolean getShowProgress() {
         return true;
     }
    
  5. (Optional) Register Module in MainActivity.java

    This is required if you want to get the currently installed JS code version in your JS code.

     /**
      * A list of packages used by the app. If the app uses additional views
      * or modules besides the default ones, add more packages here.
      */
     @Override
     protected List getPackages() {
         return Arrays.asList(
                 new ReactNativeAutoUpdaterPackage(), // Add the ReactNativeAutoUpdater Package
                 new MainReactPackage());
     }
    

JS (optional, common for iOS and Android)

var ReactNativeAutoUpdater = require('react-native-auto-updater');

ReactNativeAutoUpdater.jsCodeVersion() 
// will give you the JS code version that is currently in use

你可能感兴趣的:(RN升级配置说明)