同app下多个react-native jsBundle的解决方案
在 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 热更新。 这个过程中遇到了很多问题,但是在网络上并没有找到太多相关的资料,所以在此做一个记录,也让有相似需求的朋友少走一些弯路。 前提
Android嵌入多个app这一步比较简单,RN本身就支持这么做,只需要新建一个 嵌入多个bundle嵌入多个bundle还要互不影响,这就需要把js的运行环境隔离开,我们需要一个新的 public class MainApplication extends Application implements ReactApplication { ... @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }; ... } 检查了一下这个方法的调用,发现RN框架中只有一处调用了此方法。在 protected ReactNativeHost getReactNativeHost() { return ((ReactApplication) getPlainActivity().getApplication()).getReactNativeHost(); } 于是我首先在 private final ReactNativeHost mReactNativeMyHost = new ReactNativeHost(this) { @Override protected String getBundleAssetName() { return "index.my.android.bundle"; } } 然后写了一个新的接口 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; }; ... } 然后重写了 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()); } } 然后 public class MyActivity extends ReactActivity { @Override protected String getMainComponentName() { return "newAppName"; } @Override protected ReactActivityDelegate createReactActivityDelegate() { return new MyReactActivityDelegate(this,getMainComponentName()); } } 然后只需要在B app中通过 code-push 热更新使用code-push进行两个bundle更新需要对code-push做一些更改,同时无法采用 使用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.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); } } } 此外,之前的 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,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,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改造就完成了。 IOS嵌入多个appandroid完成之后,ios就容易的多。嵌入多个app和android类似,在ios上使用的是 嵌入多个bundleios在引入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时包名都可以自行更改。 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改造就完成了。 待解决的问题暂时已发现的崩溃只有一个,当进入过B app之后,返回主app,这个时候如果进行code-push更新检查,并且发现更新之后进行更新,ios会崩溃,更新失败;android会报更新错误,但实际上更新成功,需要下次启动app才生效。 修改过的code-push@5.2.1 见 https://github.com/haven2worl... 搞定(〃'▽'〃)。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |