正文如下

如何从 0 到 1 开发 RN APP 构建平台_RN APP

一、简介

1.我是谁?

大家好,我是胡民伟,现在在宋小菜担任前端开发,主要负责业务开发,前端构建服务以及前端服务器运维。

2.我们的团队?

如何从 0 到 1 开发 RN APP 构建平台_RN APP_02如何从 0 到 1 开发 RN APP 构建平台_RN APP_03

3.我们的产品

如何从 0 到 1 开发 RN APP 构建平台_RN APP_04如何从 0 到 1 开发 RN APP 构建平台_RN APP_05

二、分享大纲

如何从 0 到 1 开发 RN APP 构建平台_RN APP_06image.png

1.构建现状

2.从0到1

3.从1到2

4.从2到N

5.推荐书籍

三、构建现状

如何从 0 到 1 开发 RN APP 构建平台_RN APP_07image.png

1.本地打包的痛点

如何从 0 到 1 开发 RN APP 构建平台_RN APP_08image.png

1.1 是哪一个APP?

1.2 是打 iOS 还是 Android ?

1.3 是正式环境,还是日常测试环境?

1.4 是否开启热更新功能?

1.5 是否开启 Debug 模式?

1.6 是在哪个同学的电脑上打的包?

2.APP 打包

2.1 APP 打包流程

如何从 0 到 1 开发 RN APP 构建平台_RN APP_09image.png

2.2 APP 打包效果展示

如何从 0 到 1 开发 RN APP 构建平台_RN APP_10image.png

3.PC/H5 打包

3.1 PC/H5 打包流程

如何从 0 到 1 开发 RN APP 构建平台_RN APP_11

image.png

3.2 PC/H5 打包效果展示

如何从 0 到 1 开发 RN APP 构建平台_RN APP_12如何从 0 到 1 开发 RN APP 构建平台_RN APP_13

4.小程序打包

如何从 0 到 1 开发 RN APP 构建平台_RN APP_14

image.png

四、从 0 到 1

1.React Native 技术架构

如何从 0 到 1 开发 RN APP 构建平台_RN APP_15image.png

2.Android RN 本地打包

2.1 Android 项目结构

如何从 0 到 1 开发 RN APP 构建平台_RN APP_16image.png

2.2 Android 构建脚本

如何从 0 到 1 开发 RN APP 构建平台_RN APP_17image.png

2.3 React.gradle 中打包 index.android.bundle 相关代码

如何从 0 到 1 开发 RN APP 构建平台_RN APP_18

3.iOS RN 本地打包

3.1 iOS 项目结构

如何从 0 到 1 开发 RN APP 构建平台_RN APP_19image.png

3.2 iOS 构建脚本

  • 对 Target 进行编译、归档生成 .xcarchive 文件
如何从 0 到 1 开发 RN APP 构建平台_RN APP_20image.png
  • 对 .xcarchive 归档文件进一步处理,生成不同渠道的 .ipa 包,进行分发
如何从 0 到 1 开发 RN APP 构建平台_RN APP_21image.png

4.Xmansion 打包系统

4.1 打包流程

如何从 0 到 1 开发 RN APP 构建平台_RN APP_22image.png

4.2 系统架构

如何从 0 到 1 开发 RN APP 构建平台_RN APP_23image.png

4.3 打包步骤

  • a.选择打包应用
如何从 0 到 1 开发 RN APP 构建平台_RN APP_24image.png
  • b.设置打包参数
如何从 0 到 1 开发 RN APP 构建平台_RN APP_25image.png
  • c.查看打包日志

如何从 0 到 1 开发 RN APP 构建平台_RN APP_26如何从 0 到 1 开发 RN APP 构建平台_RN APP_27

5.构建核心步骤如何从 0 到 1 开发 RN APP 构建平台_RN APP_28

5.1 Node 执行 Shell

如何从 0 到 1 开发 RN APP 构建平台_RN APP_29image.png

5.2 package_android.sh 节选

如何从 0 到 1 开发 RN APP 构建平台_RN APP_30image.png

5.3 package_ios.sh 节选

如何从 0 到 1 开发 RN APP 构建平台_RN APP_31image.png

五、从 1 到 2

1.面临问题

1.1 不能并行打包

  • 不能并行打包,没法充分利用机器资源
  • 没有任务队列,打包需要值守

1.2 iOS 打包签名发布步骤繁琐

  • 证书与描述文件的关系比较混乱
  • iOS商店包仍需手动发布到AppStore审核

1.3 统一前后端线上发布流程

  • 为规范前后端开发部署流程,公司内部统一使用devops平台
  • 后端构建任务采用Jenkins发布,前端打包平台待向外提供服务能力

2.解决方案:封装 sxc-rn-cli + fastlane

如何从 0 到 1 开发 RN APP 构建平台_RN APP_32image.png

2.1 Why fastlane?

如何从 0 到 1 开发 RN APP 构建平台_RN APP_33image.png

2.2 sxc-rn-cli 配置文件

如何从 0 到 1 开发 RN APP 构建平台_RN APP_34image.png

2.3 sxc-rn-cli 使用:所有打包参数都可以通过 jenkins 的调用给到打包脚本

如何从 0 到 1 开发 RN APP 构建平台_RN APP_35image.png

2.4 sxc-rn-cli 核心功能

如何从 0 到 1 开发 RN APP 构建平台_RN APP_36image.png

2.5 fastlane action android

如何从 0 到 1 开发 RN APP 构建平台_RN APP_37image.png

2.6 fastlane action iOS

如何从 0 到 1 开发 RN APP 构建平台_RN APP_38image.png

3.前后端统一发布流程:解决方案

3.1 打包逻辑迁移至 Jenkins

如何从 0 到 1 开发 RN APP 构建平台_RN APP_39image.png

3.2 对接Devops,向外提供服务

如何从 0 到 1 开发 RN APP 构建平台_RN APP_40image.png

六、从 2 到 N

1.正在开发功能

如何从 0 到 1 开发 RN APP 构建平台_RN APP_41image.png

七、推荐书籍《暗时间》

如何从 0 到 1 开发 RN APP 构建平台_RN APP_42image.png

 

 

 

如何从 0 到 1 开发 RN APP 构建平台_RN APP_43