react-native(ios打包、上传教程)

趁着现在有时间,总结一下,留给需要的小伴们看。

1、首先我们要先打离线资源包

为了日后把打包方便,我们把打包指令填在下package.json

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle"
  },

这样打包只需要在根目录下输入npm run bundle-ios 即可(切记一定要先在项目-->ios下新建bundle文件夹,不然会报错)

WeChat7031a99aff4ba621818bfdc76851ac6d.png

之后你会发现bundle文件下面已经有了内容(如下图)
image.png

2、接下来将离线资源包放入到项目中

在Xcode中添加资源到项目中,必须使用Create folder references的方式(也就是文件夹的方式)添加bundle文件夹:


image.png

必须使用Create folder references的方式添加:


image.png

添加成功后bundle文件夹为蓝色(如下图)
WeChatabd027c906136c6b33dabd6affced2b2.png

3、打包的最后一步

在开发的过程中可以在这里配置Debug Server的地址,当发布上线的时候,就需要使用离线的jsbundle文件,因此需要设置jsCodeLocation为本地的离线jsbundle。

在AppDelegate设置离线的jsCodeLocation:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

//  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
//  jsCodeLocation = [NSURL URLWithString:@"http://192.0.0.0:8081/index.bundle?platform=ios&dev=true"];//真机Hot reloading
#ifdef DEBUG
     jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];//开发调试
#else
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index" withExtension:@"jsbundle"];//上线打包
  
#endif
 ........
}

上传

按照下面的步骤走,就可以打包成功,我不说各种原因,只讲操作步骤:

简单粗暴!!!

首先你得有一个苹果开发者账号。要是没有,就自己申请一个。

注意:在创建app IDs 还有描述文件的时候,需要添加的是发布版本,就是ad hoc里面的版本,而不是简单的开发版本。如下图:(证书与描述文件都需要发布版本的)

1025776-99c09a1ff3f97f85.png

可以先忽略,一会在创建证书的时候再看

1.创建一个ipaDemo工程。

2.打开苹果开发者中心。

网址https://developer.apple.com/membercenter

3.打开这个网址之后会出现下面的样式。

1025776-daff565c3b97464f.png

刚刚进入的的界面的样式

4.进入App开发账户里面:

1025776-7b12980931d20f40.png

手机App

5.创建证书的总体步骤,分5步:

5.1创建证书

5.2添加APP IDs

5.3添加设备

5.4创建描述文件

1025776-70e0e6683d43b4d5.png

总体步骤

对于这些过程,网络上的文章比较多,我也不一一展开了,我添加一个比较好的博客的文章,与大家分享这个过程。说白了这也是真机测试与创建证书的一部分。李大泽网址

6. iOS打包,一共有三种方式,不过还是通过Xcode的打包比较好,因为我在测试了这三种打包之后,我发现通过xcode打包的包的大小是最小的,不过下面我也介绍这三种打包方式。

第一种打包方式:

6.1 Xcode打包:

6.1.1

1025776-13e35bb0f33221a7.png
  1. 配置provisioning profile与证书

6.1.2

1025776-d7dcf518d308bfcf.png

2.配置provisioning profile与证书

我在上面这两步的时候,由于只调整了一个code singing,所以出现了一直打包不成功。一般情况下,是先进行步骤6.1.1,基本上不用管步骤6.1.2,只需要看看6.1.2是否与6.1.1的描述文件、证书是否一致。保证一致就可以了。

6.1.3

1025776-b92449e396deb8a9.png

6.1.4 选择Release 模式:

1025776-eb99945484daf7d0.png

6.1.5 需要release ,Run里面的,也需要release Archive 里面的。

1025776-457595d6f73f0e6d.png

6.1.6

1025776-e0c77adc7a5a19b1.png

打包示例

6.1.7开始打包:若是comd+b 运行成功了,就可以进行下一步了

1025776-4d5968b6c21fee0d.png

6.1.8生成包:

1025776-c0af2fcb7963157b.png

6.1.9输出包:

1025776-dd0d2e3a58bb3b4e.png

6.1.10

1025776-3b3d73cc0c8a7b08.png

生成四种不同的开发包,查看链接。4种ipa包

6.1.11

1025776-8693a93a216506ca.png

6.1.12

1025776-ec024a2db9fd5acc.png

6.1.13 在桌面上出现安装包:

WeChat7095cb98689fbece695bb2d460f75c79.png

WeChat2bfb468022b809a87fc742b3e8c132b9.png

大功告成

第二种打包方式:

6.2 通过生成文件Payload文件夹,生成ipa包。

重复上面6.1.7 之前的所有步骤,在commd+b 编译之后,查看是否编译成功,要是成功。如下图:

6.2.1

1025776-c5304f2b766524ea.png

表示可以打包了

6.2.2

1025776-3f12f11ca15ec527.png

6.2.3

1025776-fad6fc7cbb7f9949.png

6.2.4在桌面上新建一个文件夹名字叫“Payload”,注意一个字母也不能少。并将上面的APP直接拷贝到这个文件夹下面,压缩这个文件夹,并将文件夹的后缀名,改正 “.ipa”。如下图:

1025776-51d7e48121f19a17.png

ipa

第三种打包方式:

通过iTunes,打包。

6.3.1 打开你的iTunes。

6.3.2 直接把刚刚的那个 .app,拖到你的iTunes里面。如下图:

1025776-98c5cc64ebd6feaa.png

6.3.3 在Finder里面显示:

1025776-2fbdbc268f32b97b.png

6.3.4这样就生成了一个ipa包:

1025776-7d1549a9d9fa2dd4.png
  1. 安装到测试机上:对于以上生成的所有的ipa包,都需要双击打开他们,在你的iTunes里面,安装你的这个应用包。如下图:
1025776-08aeae6928df67cd.png

安装步骤

生成的app如下图,要是能够显示app是正常的,则证明没有问题,否则安装不成功:

1025776-41174befbe820362.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351