1.项目准备
原理是打包bundle，然后把文件放到服务器上。
react-native打包文件结果包含bundle文件和图片资源文件。
如果app加载本地bundle或者连接本地开发服务，图片资源是可以正常访问的，但是如果访问的是多级目录地址，例如http://www.xxx.com/awe/bundle.js，图片的地址只会从域名http://www.xxx.com查找，最终导致图片无法显示。
这是因为Image组件加载逻辑不支持多级目录，感兴趣可以查看ReactNative图片资源那些事了解详情。
解决方案是Image/resolveAssetSource提供的setCustomSourceTransformer，它可以让我们决定图片的处理逻辑。
我们把serverUrl替换为jsbundleUrl，这样图片就会从bundle同级查找到图片。
如果有其他需求，可以参阅react-native/Libraries/Image/resolveAssetSource中相关代码，自行设置setCustomSourceTransformer。
importReactfrom'react'; import{AppRegistry,Platform}from'react-native'; import{setCustomSourceTransformer}from'react-native/Libraries/Image/resolveAssetSource'; importEntryfrom'./src/entry'; if(process.env.NODE_ENV_REAL==="test"){ //定制资源的获取方式 //由域名根目录调整为bundle所在目录 //安卓使用drawable格式 setCustomSourceTransformer((resolver)=>{ resolver.serverUrl=resolver.jsbundleUrl; if(Platform.OS==="android"){ returnresolver.drawableFolderInBundle(); } returnresolver.defaultAsset(); }); } AppRegistry.registerComponent('awe',()=>Entry); |
2.jenkins配置
2.1创建任务
点击"新建任务"开始填写任务信息，输入任务名称并选择"构建一个自由风格的软件项目"。
2.2源码管理
"源码管理"中配置项目代码，以Git为例，需要配置两个参数：
Repositories仓库地址和认证方式
Branchestobuild分支，我们填入$branch，指定为自定义构建参数?
2.3添加任务参数
在"General"中勾选"参数化构建过程"，然后点击"添加参数"，在候选列表中选择GitParameter，配置以下两项：
Name：可访问到的变量名称，如配置为branch后可以通过$branch拿到值
ParameterType：选择Branch，也可以根据情况配置其他选项
这样在前面"源码管理"中配置的$branch就可以访问到仓库的所有分支。
以及一个选项参数：env(指定目标环境)。候选数据一行一条记录输入即可。
2.4添加构建执行Shell
在"构建"中点击"增加构建步骤"按钮，在候选列表中选择"执行shell"。
下面是一段简单判断env执行不同脚本的代码：
#!/bin/bash echo------------------------------------------------------- echo环境:${env} echo------------------------------------------------------- #准备工作 yarninstall if["$env"=="dev"] then yarnrunbundle-android yarnrunbundle-ios elif["$env"=="prod"] then yarnrunprod-android yarnrunprod-ios fi |
2.5部署和使用
最后大家把生成的bundle文件连同资源文件部署到服务器，app中填写对应的地址。
ios:http://xxx.com/rn/juzizhou/bundle/ios/
android:http://xxx.com/rn/juzizhou/bundle/android/
另外需要注意:
取消"UseJSDeltas"
可能需要对bundle设置mime-type
react-nativebundle存在缓存问题，使用--reset-cache参数清除
写在最后
至此我们可以安心通过jenkins来发布，其实一开始就有这样做的想法，不过一直迟迟未动，如今总算是实践完成并写了这篇文章。
算上我前面发布的微信小程序和Jenkins不得不说的二三事，这已经是第二篇关于jenkins自动化的文章，有机会我会再写相关实践。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理
