react-native iOS打包

通常进行react-native app 运行的时候，默认是本地开启一个node服务，也就是启用localhost:8081端口，来进行数据交互，如果我们简单的将这个应用安装到真机的话是无法使用的，除非你开启本地服务，这时候就需要我们进行将jsbundle包存放到本地了，这样我们就可以不借助本地服务就可以将app 在真机上运行。

而我们进行打包则需要借助

react-native bundle

这个指令进行操作，首先我们可以查看一下使用

react-native bundle --help


    --entry-file <path>                Path to the root JS file, either absolute or relative to JS root
    --platform [string]                Either "ios" or "android" (default: ios)
    --transformer [string]             Specify a custom transformer to be used
    --dev [boolean]                    If false, warnings are disabled and the bundle is minified (default: true)
    --minify [boolean]                 Allows overriding whether bundle is minified. This defaults to false if dev is true, and true if dev is false. Disabling minification can be useful for speeding up production builds for testing purposes.
    --bundle-output <string>           File name where to store the resulting bundle, ex. /tmp/groups.bundle
    --bundle-encoding [string]         Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer). (default: utf8)
    --max-workers [number]             Specifies the maximum number of workers the worker-pool will spawn for transforming files. This defaults to the number of the cores available on your machine.
    --sourcemap-output [string]        File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
    --sourcemap-sources-root [string]  Path to make sourcemap's sources entries relative to, ex. /root/dir
    --sourcemap-use-absolute-path      Report SourceMapURL using its full path
    --assets-dest [string]             Directory name where to store assets referenced in the bundle
    --verbose                          Enables logging
    --reset-cache                      Removes cached files
    --read-global-cache                Try to fetch transformed JS code from the global cache, if configured.
    --config [string]                  Path to the CLI configuration file
    -h, --help                         output usage information

通过帮助我们就可以借助以下指令完成我们本地包需求
指定入口文件,需要说明的是我的react-native 的版本是

react-native --version
react-native-cli: 2.0.1
react-native: 0.55.2

然后指定平台,这里我们可以将输出文件指定输出到指定目录，而且比较恶心的一点是，你指定的路径如果文件夹不存在它不会帮你创建，会报错，所以你需要提前创建好文件夹bundle,并且指定为index_ios.jsbundle,不能指定main.jsbundle,否则可能会产生错误。
--dev 默认为true ,这里需指定为false,即release状态。

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

当看到下面的输出结果，及为输出正确

Scanning folders for symlinks in /Users/junfeiwang/Desktop/reactPackage/QingQi/node_modules (16ms)
Scanning folders for symlinks in /Users/junfeiwang/Desktop/reactPackage/QingQi/node_modules (32ms)
Loading dependency graph, done.
bundle: Writing bundle output to: ./bundle/index_ios.jsbundle
bundle: Done writing bundle output

接下来我们需要将这两个文件拖入我们的项目中，需要注意的一点的是assets文件必须用Create folder references【蓝色文件夹图标】的方式引入，否则引用不到图片，这是跟react-native查找文件的方式有关的，就是在一个独立文件夹下引用图片路径。

最后一步我们需要修改js文件的jsCodeLocation的引入方式，

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index_ios" withExtension:@"jsbundle"];

默认是加载本地的js文件，当然也可以将jsbundle 放到自己的远程服务器中，更换远程的服务器文件就可以加载jsbundle,为了提高性能我们可以在本地做一次缓存。

以上步骤我们整个app流程完成，我们就可以采用ios 打包方式进行打包上传，这个步骤不再赘述，大家有兴趣可以查看我以前关于iOS 脚本打包的上传的文章。