react native ios打包

最近起了一个新的项目，让用react native ，下面学习下打包：
因为当我们需要发布App到App Store的时候就需要打包,使用离线的js代码和图片。这就需要把JavaScript和图片等资源打包成离线资源，在添加到Xcode中，然后一起发布到App Strore中。
打包离线资源需要使用命令react-native bundle

react-native bundle

一 、把JavaScript和图片等资源打包成离线资源
1 创建目录bundle 如图

2 先进入到项目下面 如图

3 输入命令

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

命令解释如下

• –entry-file ,ios或者android入口的js名称，比如index.ios.js
• –platform ,平台名称(ios或者android)
• –dev ,设置为false的时候将会对JavaScript代码进行优化处理。
• –bundle-output, 生成的jsbundle文件的名称，比如./ios/bundle/index.ios.jsbundle
• –assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

4为了方便使用，也可以把打包命令写到npm script中:

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "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.ios.jsbundle --assets-dest ./ios/bundle"

  },

然后运行命令直接打包:

npm run bundle-ios

打包结果

二 、添加资源
离线包生成完成之后，可以在ios目录下看到一个bundle目录，这个目录就是bundle生成的离线资源。
需要在Xcode中添加资源到项目中，必须使用Create folder references的方式添加文件夹.
1、Add Files to “AwesomeProject” 如图

2、选择bundle文件,在option中选择Create folder references 如图

3、添加到项目中的文件夹必须是蓝色 如图

4、在ios中AppDelegate里可以看到设置JavaScript代码位置的代码：