rn版本:0.55
原生和rn混编
TouchableWithoutFeedback系列组件内部包含的Text设置lineHeight时,在某些安卓手机上可能导致文本显示出现被切割现象
安卓的部分组件如Text无法撑开父视图的宽高
安卓和ios的Text组件文本内置间隙差异很大
Dimensions.get('window’)获取的屏幕宽高,在某些安卓机型上面有问题,例如没有考虑顶部状态栏和底部按键栏目,需要原生另外写方法判断
对Animated.View等动画组件,设置transform的scale为0在某些安卓手机上无法完全隐藏,可以配合设置opacity为0实现效果
rn执行的代码中涉及到原生代码有改动,则该rn包不能下发给旧的app版本,需要做版本控制
rn页面实现类似viewwillappera的代理方法
前提是所有的rn页面的跳转是由原生控制,rn仅仅是显示作用。跳转到rn页面代码如下
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:moduleName initialProperties:properties];
RNViewController *vc = [[HCZRNViewController alloc] init];
[vc.view addSubview:rootView];
[nav pushViewController:vc animated:YES];
RNViewController就是一个普通的UIViewController,在内部的viewWillAppear中发出通知,通过RCTEventEmitter将事件传递给RN页面(RN页面需要监听该事件才行)
rn拆包
拆分给common和业务包,common只包含公共的基础组件,为各个业务模块共用,可以采用内置方案,程序启动时的Bridge就先加载该模块。
业务包为各个业务模块所独立,打包时会根据内部依赖将该业务模块所依赖的组件全部导出,内部会包含commom模块的内容,需要过滤掉,减少体积。
--manifest-output命令就是获取各个组件的特征id值,通过对比id值实现过滤
下面是某个业务模块拆包的脚本文件,shell语言编写
#输入ios和androidread -p "输入platform: " -r platformresultDir=./distbundlerBin=./node_modules/metro-bundler-cli/bin/metro-bundler-cli.jsbundlerCmd="$bundlerBin bundle --platform $platform --dev false"#清空结果目录 if [ -e "$resultDir" ]; then rm -r $resultDir/* else mkdir $resultDir fi#打包common组件,目的是获取common的特征值。 --manifest-output获取common组件的特征id值base.manifest.json文件$bundlerCmd --entry-file ./base.js --bundle-output $resultDir/base.jsbundle --manifest-output $resultDir/base.manifest.json --use-stable-id true#打包业务组件 --exclude为过滤命令,根据base.manifest.json文件,过滤掉业务组件中所包含的common组件$bundlerCmd --entry-file pax_index.js --bundle-output $resultDir/pax.jsbundle --manifest-output $resultDir/business.manifest.json --assets-dest $resultDir --exclude $resultDir/base.manifest.json --use-stable-id true --assetPath businesscd $resultDirif [[ "$platform" = "ios" ]]; then cp ../switch.json switch.json zip -r paxIos.zip pax.jsbundle assets switch.json fielse cp ../switch.json ./switch.json zip -r paxAndroid.zip pax.jsbundle drawable-mdpi switch.jsonfi
程序运行时需要将common和业务模块合并,可以采用算法将jsbudle合并在执行,也可以采用更简单的方式,Bridge创建时先加载common内容,当进入具体的某个业务模块时,动态加载业务模块jsbudle。动态加载方法是enqueueApplicationScript,参考尾部链接
自建热更新
rn具有内置包以及存储在沙盒cache中的网络下载包。优先使用cache中的热文件,若cache中没有需要的文件,则将内置包拷贝到cache中。
每次打开app时从服务器拉取所有模块的配置表,该接口需要传的参数是一个数组,内部表明各个模块的当前版本号,服务器拿着版本号做对比判断哪些模块需要更新。客户端对需要更新的模块一一下载,然后覆盖到cache中。若某个模块需要回滚,则客户端会删除该模块在cache中的文件。
网友评论