原理是打包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
,指定为自定义构建参数
在"General"中勾选"参数化构建过程",然后点击"添加参数",在候选列表中选择GitParameter
,配置以下两项:
Name
:可访问到的变量名称,如配置为branch后可以通过$branch拿到值ParameterType
:选择Branch,也可以根据情况配置其他选项
这样在前面"源码管理"中配置的$branch
就可以访问到仓库的所有分支。
以及一个选项参数:env
(指定目标环境)。候选数据一行一条记录输入即可。
在"构建"中点击"增加构建步骤"按钮,在候选列表中选择"执行shell"。
下面是一段简单判断env
执行不同脚本的代码:
#!/bin/bashecho-------------------------------------------------------echo环境:${env}echo-------------------------------------------------------#准备工作yarninstallif["$env"=="dev"]thenyarnrunbundle-androidyarnrunbundle-ioselif["$env"=="prod"]thenyarnrunprod-androidyarnrunprod-iosfi
2.5部署和使用最后大家把生成的bundle
文件连同资源文件部署到服务器,app
中填写对应的地址。
- ios:xxx.com/rn/juzizhou…
- android:xxx.com/rn/juzizhou…
另外需要注意:
- 取消"UseJSDeltas"
- 可能需要对bundle设置mime-type
react-nativebundle
存在缓存问题,使用--reset-cache
参数清除
至此我们可以安心通过jenkins
来发布,其实一开始就有这样做的想法,不过一直迟迟未动,如今总算是实践完成并写了这篇文章。
算上我前面发布的微信小程序和Jenkins不得不说的二三事,这已经是第二篇关于jenkins
自动化的文章,有机会我会再写相关实践。
本文同步发表于作者博客:ReactNative和Jenkins不得不说的二三事