趁着现在有时间,总结一下,留给需要的小伴们看。
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文件夹
,不然会报错)
之后你会发现bundle文件下面已经有了内容(如下图)
2、接下来将离线资源包放入到项目中
在Xcode中添加资源到项目中,必须使用Create folder references的方式(也就是文件夹的方式)添加bundle文件夹:
必须使用Create folder references的方式添加:
添加成功后bundle文件夹为蓝色(如下图)
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里面的版本,而不是简单的开发版本。如下图:(证书与描述文件都需要发布版本的)
可以先忽略,一会在创建证书的时候再看
1.创建一个ipaDemo工程。
2.打开苹果开发者中心。
网址 :https://developer.apple.com/membercenter
3.打开这个网址之后会出现下面的样式。
刚刚进入的的界面的样式
4.进入App开发账户里面:
手机App
5.创建证书的总体步骤,分5步:
5.1创建证书
5.2添加APP IDs
5.3添加设备
5.4创建描述文件
总体步骤
对于这些过程,网络上的文章比较多,我也不一一展开了,我添加一个比较好的博客的文章,与大家分享这个过程。说白了这也是真机测试与创建证书的一部分。李大泽网址
6. iOS打包,一共有三种方式,不过还是通过Xcode的打包比较好,因为我在测试了这三种打包之后,我发现通过xcode打包的包的大小是最小的,不过下面我也介绍这三种打包方式。
第一种打包方式:
6.1 Xcode打包:
6.1.1
- 配置provisioning profile与证书
6.1.2
2.配置provisioning profile与证书
我在上面这两步的时候,由于只调整了一个code singing,所以出现了一直打包不成功。一般情况下,是先进行步骤6.1.1,基本上不用管步骤6.1.2,只需要看看6.1.2是否与6.1.1的描述文件、证书是否一致。保证一致就可以了。
6.1.3
6.1.4 选择Release 模式:
6.1.5 需要release ,Run里面的,也需要release Archive 里面的。
6.1.6
打包示例
6.1.7开始打包:若是comd+b 运行成功了,就可以进行下一步了
6.1.8生成包:
6.1.9输出包:
6.1.10
生成四种不同的开发包,查看链接。4种ipa包
6.1.11
6.1.12
6.1.13 在桌面上出现安装包:
大功告成
第二种打包方式:
6.2 通过生成文件Payload文件夹,生成ipa包。
重复上面6.1.7 之前的所有步骤,在commd+b 编译之后,查看是否编译成功,要是成功。如下图:
6.2.1
表示可以打包了
6.2.2
6.2.3
6.2.4在桌面上新建一个文件夹名字叫“Payload”,注意一个字母也不能少。并将上面的APP直接拷贝到这个文件夹下面,压缩这个文件夹,并将文件夹的后缀名,改正 “.ipa”。如下图:
ipa
第三种打包方式:
通过iTunes,打包。
6.3.1 打开你的iTunes。
6.3.2 直接把刚刚的那个 .app,拖到你的iTunes里面。如下图:
6.3.3 在Finder里面显示:
6.3.4这样就生成了一个ipa包:
- 安装到测试机上:对于以上生成的所有的ipa包,都需要双击打开他们,在你的iTunes里面,安装你的这个应用包。如下图:
安装步骤
生成的app如下图,要是能够显示app是正常的,则证明没有问题,否则安装不成功: