react native ios打包流程(小白文)

原创
2017/12/06 14:43
阅读数 3.9K

react native ios打包流程(小白文)

为了让小白也能看懂,本文极其浅显,流程步骤有点多,不耐烦的同学可以跳跃阅读

准备工作1:开发者账号

  • 由于申请开发者账号要钱的,这里大致讲一下流程,不懂的可以留言给我(开发者账号分为:个人开发者账号、公司开发者账号、企业开发者账号)
  • 申请流程1:申请开发者Apple ID,
  • 申请流程2:付钱(开发者账号分为:个人开发者账号、公司开发者账号、企业开发者账号)

准备工作2:要打包,你的有一个项目

  • 初始化一个项目:react-native init RNTestDemo --version 0.48.3
  • 用xcode 跑一下项目,确定你的项目没问题

生成react native 项目的离线资源包(这块耐心看下,说的有点累赘,但是为了大家理解透彻一些,我就废话多一些吧)

  • 说到这里我要解释一下react native 打包的原理:RN ios打包的本质其实还是ios打包,只是我们要把 要打包rn的代码,图片资源文件等编译生成一个离线资源包文件(也就是bundle文件),放到xcode里面,然后通过xcode打包项目一起发布到App Strore中。具体操作看后面

  • 生成 RN 离线资源文件:cd 到项目文件夹下,然后跑下面命令 node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle

  • 操作如下图:

从这里看到,发生了一些错误,这里我是故意的,因为这个问题比较常见,从上图可以看出,前面的打包都很胜利,编译完成后,把生成的bundle文件写入文件的时候发生错误,提示./ios/bundle/index.ios.jsbundle这个目标文件不存在,为什么会提示这个错误呢?我们来看一下我们打包的命令

node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle

  • node node_modules/react-native/local-cli/cli.js bundle 这一截你不用管他,把它看成脚本命令就好

  • --entry-file 要打包的入口文件 我们这里是:index.ios.js

  • --dev false 是否是debug 模式,我们打包的肯定不是debug模式咯,所以false

  • --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle ,--bundle-output是生成的bundle文件放的文件位置,后面跟的就是文件位置了,我们上面提示的错误就是这里导致的,因为我们要存放的bundle文件位置为./ios/bundle/index.ios.jsbundle,我们打开我们的项目目录你会发现ios文件目录下没有bundle文件夹,所以在把资源文件写入的时候才会导致失败。解决办法就是在项目的ios文件目录下手动创建一个bundle文件夹

  • 解决问题重新来一下编译:成功了,可以看到ios/bundle也有文件了

xcode 中添加资源文件

  • 离线包生成完成之后,可以在ios目录下看到一个bundle目录,这个目录就是bundle生成的离线资源。 需要在Xcode中添加资源到项目中Add files to **,必须使用Create folder references的方式添加文件夹.

  • 注意:添加到项目中的文件夹是蓝色

  • 修改AppDelegate 中代码,加载前面生产的bundle文件资源

后面的打包和ios打包正常流程一样

懒筋发作,如果不会ios打包的会,可以留言(个人发布、公司发布、企业发布都可以询问),如果不会的小伙伴多的话,我就把这一截长长的补起来

展开阅读全文
打赏
1
1 收藏
分享
加载中
该评论暂时无法显示,详情咨询 QQ 群:912889742
该评论暂时无法显示,详情咨询 QQ 群:912889742
该评论暂时无法显示,详情咨询 QQ 群:912889742
正在学子中😄
2017/12/07 10:51
回复
举报
更多评论
打赏
4 评论
1 收藏
1
分享
返回顶部
顶部