同app下多個react-native jsBundle的解決方案

haven_chen發表於2018-04-25
APPReactJS

在 react-native (以下稱RN)還是0.39的時候，我們開始著手構建了一個純RN app，之後由於長列表的效能問題，進行了一次更新，將版本更新到了0.46，並一直維持 。直到前段時間，遇到了一個新的需求，要把隔壁部門用RN寫的一個app(以下稱為B app)的一部分業務嵌入我們的app中。由於B app的業務重度依賴路由，而B app的路由和我們app所用的路由有一些衝突，簡單的元件化然後引用的方式並不適用，同時將兩個app打成一個bundle的方法由於依賴衝突也無法採用。最終選擇了將兩個app分別打成兩個bundle的方式，並通過 code-push 熱更新。

這個過程中遇到了很多問題，但是在網路上並沒有找到太多相關的資料，所以在此做一個記錄，也讓有相似需求的朋友少走一些彎路。

前提

  • 在某一個版本後RN會在執行的時候檢查RN原生部分的版本和RN js部分的版本，所以我們最後只能將RN升級到B app的0.52 。從程式碼看如果有一兩個版本的差距應該也可以，但是沒有做嘗試。
  • 最終解決方案中是以我方app的原生部分為基礎，加入B app的bundle，這意味著，雖然我們可以把B app的原生程式碼複製到我們的工程當中，但是雙方需要link的依賴庫不能存在衝突。

Android

嵌入多個app

這一步比較簡單，RN本身就支援這麼做，只需要新建一個 Activity，在getMainComponentName()函式中返回新的app註冊的名字，（即js程式碼中AppRegistry.registerComponent()的第一個引數）就可以了。跳轉app可參照android跳轉Activity進行。

嵌入多個bundle

嵌入多個bundle還要互不影響，這就需要把js的執行環境隔離開，我們需要一個新的ReactNativeHost，ReactNativeHost是在MainApplication類中new出來的，我們new一個新的即可。然後我們會發現，原本RN是通過實現了介面ReactApplication中的getReactNativeHost()方法對外返回ReactNativeHost的。

public class MainApplication extends Application implements ReactApplication {
...
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    };
...
}

檢查了一下這個方法的呼叫，發現RN框架中只有一處呼叫了此方法。在ReactActivityDelegate類中，

  protected ReactNativeHost getReactNativeHost() {
        return ((ReactApplication)         getPlainActivity().getApplication()).getReactNativeHost();
  }

於是我首先在MainApplication類中new了一個新的ReactNativeHost，並且重寫了getBundleAssetName()方法，返回了新的bundle名index.my.android.bundle

private final ReactNativeHost mReactNativeMyHost = new ReactNativeHost(this) {
    @Override
    protected String getBundleAssetName() {
    return "index.my.android.bundle";
  }
}

然後寫了一個新的介面MyReactApplication，並且在MainApplication類中實現了這個介面，這個介面與實現如下

MyReactApplication.java

public interface MyReactApplication {

  /**
   * Get the default {@link ReactNativeHost} for this app.
   */
  ReactNativeHost getReactNativeMyHost();
}
--------------------
MainApplication.java

public class MainApplication extends Application implements ReactApplication, MyReactApplication {
...
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    };
    @Override
    public ReactNativeHost getReactNativeMyHost() {
        return mReactNativeMyHost;
    };
...
}

然後重寫了ReactActivityDelegate類，重點在於getReactNativeHost()方法，其他都是複製了ReactActivityDelegate類中需要用到的私有方法：

public class MyReactActivityDelegate extends ReactActivityDelegate{

  private final @Nullable Activity mActivity ;
  private final @Nullable FragmentActivity mFragmentActivity;
  private final @Nullable String mMainComponentName ;

  public MyReactActivityDelegate(Activity activity, @Nullable String mainComponentName) {
    super(activity, mainComponentName);
    mActivity = activity;
    mMainComponentName = mainComponentName;
    mFragmentActivity = null;
  }

  public MyReactActivityDelegate(FragmentActivity fragmentActivity, @Nullable String mainComponentName) {
    super(fragmentActivity, mainComponentName);
    mFragmentActivity = fragmentActivity;
    mMainComponentName = mainComponentName;
    mActivity = null;
  }

  @Override
  protected ReactNativeHost getReactNativeHost() {
    return ((MyReactApplication) getPlainActivity().getApplication()).getReactNativeMyHost();
  }

  private Context getContext() {
    if (mActivity != null) {
      return mActivity;
    }
    return Assertions.assertNotNull(mFragmentActivity);
  }

  private Activity getPlainActivity() {
    return ((Activity) getContext());
  }
}

然後ReactActivityDelegate是在Activity中new出來的，回到我們為新app寫的Activity，重寫其繼承自ReactActivity的createReactActivityDelegate()方法：

public class MyActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "newAppName";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new MyReactActivityDelegate(this, getMainComponentName());
  }
}

然後只需要在B app中通過react-native bundle --platform android --dev false --entry-file index.js --bundle-output outputAndroid/index.my.android.bundle --assets-dest outputAndroid/打出bundle，然後將bundle和圖片資源分別移動到主工程的android的assets和res目錄下，打release包即可。需要注意的是，在debug模式下仍然無法訪問第二個app，由於debug模式下android的bundle讀取機制比較複雜，未做深入研究，如有必要，可以通過改變預設activity的方式進入第二個activity。

code-push 熱更新

使用code-push進行兩個bundle更新需要對code-push做一些更改，同時無法採用code-push react-release的一鍵式打包，需要手動打包。以下改動基於code-push@5.2.1。

使用code-push需要用getJSBundleFile()函式取代上一節所寫的getBundleAssetName()方法，由於code-push內通過一個靜態常量儲存了唯一的一個code-push例項，所以為了避免在取bundle的時候發生不必要的錯誤，我在new ReactNativeHost的時候用一個變數儲存了code-push例項，並在CodePush.getJSBundleFile("index.android.bundle", MainCodePush)的時候，通過新增一個引數將這個例項傳遞了進去。當然需要在code-push中做一些對應的改動。

MainApplication.java
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...
      public CodePush MainCodePush = null;

    @Override
    protected String getJSBundleFile() {
        return CodePush.getJSBundleFile("index.android.bundle", MainCodePush);
    }

    @Override
    protected List<ReactPackage> getPackages() {

        MainCodePush = new CodePush(codePushKey, getApplicationContext(), BuildConfig.DEBUG,codePushIp);

      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              MainCodePush
      );
    }
...
mReactNativeMyHost同樣如此
...
  };
--------
codePush.java
public static String getBundleUrl(String assetsBundleFileName) {
       return getJSBundleFile(assetsBundleFileName, mCurrentInstance);
}

public static String getJSBundleFile() {
        return CodePush.getJSBundleFile(CodePushConstants.DEFAULT_JS_BUNDLE_NAME, mCurrentInstance);
}
 
 public static String getJSBundleFile(String assetsBundleFileName, CodePush context) {
        mCurrentInstance = context;

         if (mCurrentInstance == null) {
             throw new CodePushNotInitializedException("A CodePush instance has not been created yet. Have you added it to your app`s list of ReactPackages?");
         }
 
         return mCurrentInstance.getJSBundleFileInternal(assetsBundleFileName);
}

此外，code-push在取bundle的時候會做一些檢查，在CodePushUpdateManager中getCurrentPackageBundlePath()方法會嘗試從更新包的後設資料中獲取bundle名，在此處我做了一個處理，當後設資料的bundle名和傳入的bundle名不一致時，採用傳入的bundle名，當然這也會使程式碼的健壯性有所下降。

CodePushUpdateManager.java
    public String getCurrentPackageBundlePath(String bundleFileName) {
        String packageFolder = getCurrentPackageFolderPath();
        if (packageFolder == null) {
            return null;
        }

        JSONObject currentPackage = getCurrentPackage();
        if (currentPackage == null) {
            return null;
        }

        String relativeBundlePath = currentPackage.optString(CodePushConstants.RELATIVE_BUNDLE_PATH_KEY, null);


        if (relativeBundlePath == null) {
            return CodePushUtils.appendPathComponent(packageFolder, bundleFileName);
        } else {
            String fileName = relativeBundlePath.substring(relativeBundlePath.lastIndexOf("/")+1);
            if(fileName.equals(bundleFileName)){
                return CodePushUtils.appendPathComponent(packageFolder, relativeBundlePath);
            }else{
                String newRelativeBundlePath = relativeBundlePath.substring(0,relativeBundlePath.lastIndexOf("/")+1) + bundleFileName;
                return CodePushUtils.appendPathComponent(packageFolder, newRelativeBundlePath);
            }

        }

    }

此外，之前的getReactNativeMyHost()方法存在一些問題，因為code-push只會去呼叫RN定義的介面getReactNativeHost()，如果大幅度自定義code-push比較麻煩，而且可能造成更多的潛在問題，所以我修改了一下getReactNativeHost()介面。通過android的生命週期在MainApplication中獲取當前的Activity，並儲存起來，在getReactNativeHost()中通過，判斷當前Activity的方式，決定返回的ReactNativeHost。同時仍然保留之前的寫法，因為這種方法是不可靠的，有可能在跳轉Activity後返回錯誤的ReactNativeHost，所以保留之前的方法為RN框架提供準確的ReactNativeHost，這種寫法暫時能滿足code-push的需要，由於本人java和android的水平所限只能做到這種程度，希望大佬賜教。最後完整版的MainApplication如下：

public class MainApplication extends Application implements ReactApplication, MyReactApplication {
...

  public static String currentActivity = "MainActivity";

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
      public CodePush MainCodePush = null;

    @Override
    protected String getJSBundleFile() {
        return CodePush.getJSBundleFile("index.android.bundle", MainCodePush);
    }

    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {

        MainCodePush = new CodePush(codePushKey, getApplicationContext(), BuildConfig.DEBUG,codePushIp);

      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              MainCodePush
      );
    }

    @Override
      protected String getJSMainModuleName() {
        return "index";
    }
  };

    private final ReactNativeHost mReactNativeMyHost = new ReactNativeHost(this) {
        public CodePush myCodePush = null;

        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            myCodePush = new CodePush(codePushKey, getApplicationContext(), BuildConfig.DEBUG,codePushIp);

            return Arrays.<ReactPackage>asList(
                    new MyMainReactPackage(),
                    myCodePush
            );
        }

        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile("index.my.android.bundle", myCodePush);
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {

        if(MainApplication.currentActivity.equals("MainActivity")){
            return mReactNativeHost;
        }else if(MainApplication.currentActivity.equals("MyActivity")){
            return mReactNativeMyHost;
        }
        return mReactNativeHost;
    };

    @Override
    public ReactNativeHost getReactNativeMyHost() {
        return mReactNativeMyHost;
    };


  @Override
  public void onCreate() {
    super.onCreate();

    this.registerActivityLifecycleCallbacks(new ActivityLifecycleCallbacks() {
      public String getActivityName(Activity activity){
          String allName = activity.getClass().getName();
          return allName.substring(allName.lastIndexOf(".")+1);
      }

      @Override
      public void onActivityStopped(Activity activity) {}

      @Override
      public void onActivityStarted(Activity activity) {
          MainApplication.currentActivity = getActivityName(activity);
          Log.i(getActivityName(activity), "onActivityStarted");
      }

      @Override
      public void onActivitySaveInstanceState(Activity activity, Bundle outState) {}

      @Override
      public void onActivityResumed(Activity activity) {}

      @Override
      public void onActivityPaused(Activity activity) {}

      @Override
      public void onActivityDestroyed(Activity activity) {}

      @Override
      public void onActivityCreated(Activity activity, Bundle savedInstanceState) {
          MainApplication.currentActivity = getActivityName(activity);
          Log.i(getActivityName(activity), "onActivityCreated" );
      }
    });

  }

...  
}

到此為止，android的code-push改造就完成了。
更新的時候，需要首先分別通過上文提到的react-native bundle ...命令將兩邊的工程分別打包，然後合併到同一個資料夾中，最後通過code-push release appName ./outputAndroid x.x.x命令上傳更新，命令的具體細節請參考code-push github。

IOS

嵌入多個app

android完成之後，ios就容易的多。嵌入多個app和android類似，在ios上使用的是UIViewController，新建一個UIViewController，其他都和主app一致，只是在 init rootView的時候修改一下moduleName為新的app註冊的名字即可。通過UINavigationController來進行頁面跳轉，具體開發參見IOS原生開發。

嵌入多個bundle

ios在引入bundle的時候十分靈活，只需要在 init 新的 rootView 的時候修改 initWithBundleURL 的值即可。可如下：

@implementation MyViewController

- (void)viewDidLoad{
  [super viewDidLoad];
  
  NSURL *jsCodeLocation;
  
#ifdef DEBUG
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"];
#else
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"appName"
                                               initialProperties:nil
                                                   launchOptions:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.view = rootView;
}

@end

不管debug時的遠端packager服務的地址還是release時包名都可以自行更改。
最後在B app中通過react-native bundle --platform ios --dev false --entry-file index.js --bundle-output outputIOS/my.jsbundle --assets-dest outputIOS/打出bundle，將jsbundle和圖片資源在Xcode中引入工程即可。

code-push 熱更新

ios下的熱更新依然需要對code-push做一些修改，在取bundle的時候，code-push會去比較一個本地bundle修改時間與後設資料中是否一致，當取第二個bundle的時候，此值會不一致，具體原因因時間原因沒有深究，暫時處理為，當bundle名與後設資料中不同時，不檢查修改時間。修改的程式碼如下：

+ (NSURL *)bundleURLForResource:(NSString *)resourceName
                  withExtension:(NSString *)resourceExtension
                   subdirectory:(NSString *)resourceSubdirectory
                         bundle:(NSBundle *)resourceBundle
{
    bundleResourceName = resourceName;
    bundleResourceExtension = resourceExtension;
    bundleResourceSubdirectory = resourceSubdirectory;
    bundleResourceBundle = resourceBundle;

    [self ensureBinaryBundleExists];

    NSString *logMessageFormat = @"Loading JS bundle from %@";

    NSError *error;
    NSString *packageFile = [CodePushPackage getCurrentPackageBundlePath:&error];

    NSURL *binaryBundleURL = [self binaryBundleURL];
    
    if (error || !packageFile) {
        CPLog(logMessageFormat, binaryBundleURL);
        isRunningBinaryVersion = YES;
        return binaryBundleURL;
    }
    
    NSString *binaryAppVersion = [[CodePushConfig current] appVersion];
    NSDictionary *currentPackageMetadata = [CodePushPackage getCurrentPackage:&error];
    if (error || !currentPackageMetadata) {
        CPLog(logMessageFormat, binaryBundleURL);
        isRunningBinaryVersion = YES;
        return binaryBundleURL;
    }
    
  

    NSString *packageDate = [currentPackageMetadata objectForKey:BinaryBundleDateKey];
    NSString *packageAppVersion = [currentPackageMetadata objectForKey:AppVersionKey];
 
    Boolean checkFlag = true;//雙bundle情況下bundle名和meta中不一致不檢查修改時間
    //用來取自定義的bundle
    NSArray *urlSeparated = [[NSArray alloc]init];
    NSString *fileName = [[NSString alloc]init];
    NSString *fileWholeName = [[NSString alloc]init];
    urlSeparated = [packageFile componentsSeparatedByString:@"/"];
    fileWholeName = [urlSeparated lastObject];
    fileName = [[fileWholeName componentsSeparatedByString:@"."] firstObject];
    
    if([fileName isEqualToString:resourceName]){
        checkFlag = true;
    }else{
        checkFlag = false;
    }
    
    if ((!checkFlag ||[[CodePushUpdateUtils modifiedDateStringOfFileAtURL:binaryBundleURL] isEqualToString:packageDate]) && ([CodePush isUsingTestConfiguration] ||[binaryAppVersion isEqualToString:packageAppVersion])) {
        // Return package file because it is newer than the app store binary`s JS bundle
        
        if([fileName isEqualToString:resourceName]){
            NSURL *packageUrl = [[NSURL alloc] initFileURLWithPath:packageFile];
            CPLog(logMessageFormat, packageUrl);
            isRunningBinaryVersion = NO;
            return packageUrl;
        }else{
            NSString *newFileName = [[NSString alloc]init];
            NSString *baseUrl = [packageFile substringToIndex:([packageFile length] - [fileWholeName length] )];
            newFileName = [newFileName stringByAppendingFormat:@"%@%@%@", resourceName, @".", resourceExtension];
            NSString *newPackageFile = [baseUrl stringByAppendingString:newFileName];
        
            NSURL *packageUrl = [[NSURL alloc] initFileURLWithPath:newPackageFile];
            CPLog(logMessageFormat, packageUrl);
            isRunningBinaryVersion = NO;
            return packageUrl;
        }
        
        
    } else {
        BOOL isRelease = NO;
#ifndef DEBUG
        isRelease = YES;
#endif

        if (isRelease || ![binaryAppVersion isEqualToString:packageAppVersion]) {
            [CodePush clearUpdates];
        }

        CPLog(logMessageFormat, binaryBundleURL);
        isRunningBinaryVersion = YES;
        return binaryBundleURL;
    }
}

到此為止，ios的code-push改造就完成了。
更新的時候，需要首先分別通過上文提到的react-native bundle …命令將兩邊的工程分別打包，然後合併到同一個資料夾中，最後通過code-push release appName ./outputIOS x.x.x命令上傳更新，命令的具體細節請參考code-push github。

待解決的問題

暫時已發現的崩潰只有一個，當進入過B app之後，返回主app，這個時候如果進行code-push更新檢查，並且發現更新之後進行更新，ios會崩潰，更新失敗；android會報更新錯誤，但實際上更新成功，需要下次啟動app才生效。
android的原因沒深入研究，ios的原因主要是因為code-push中有些靜態變數是在載入bundle的時候儲存的，當進入B app的時候修改了這些變數的值，返回主app的時候並沒有重新載入bundle，所以仍然保留了錯誤的值，更新的時候會涉及到相關的值，然後就會崩潰報錯。
解決方法暫時為記錄flag，一旦進入過B app就不再進行更新。

修改過的code-push@5.2.1 見 https://github.com/haven2worl…

搞定(〃`▽`〃)。

相關文章