React Native打包IOS超详细步骤

项目名我们设定为：iotApp

1、在ios目录下新建bundle目录。后面编译打包离线资源，也会生成bundle目录，提前建，是为了防止某些情况下报错。

2、进行编译，离线打包资源。命令如下：




react-native bundle 



    --entry-file     //entry-file,ios或者android入口的js名称，比如



    --platform ios    //platform ,平台名称(ios或者android)



    --dev false    //设置为false时会对JavaScript代码进行优化处理 



    --bundle-output ./ios/bundle/    //生成的jsbundle文件的名称



    --assets-dest ./ios/bundle    //图片以及其他资源存放的目录,比如./ios/bundle

为了方便操作，在中添加编译命令（node node_modules/react-native/local-cli/为脚本，固定写就行）





"scripts": {



    ...,



    "bundle-ios":"node node_modules/react-native/local-cli/ bundle --entry-file   --platform ios --dev false --bundle-output ./ios/bundle/ --assets-dest ./ios/bundle"




}

这样每次执行npm run bundle-ios，即可离线打包资源。离线包生成完成之后，可以在ios目录下看到一个bundle目录，这个目录就是bundle生成的离线资源。（每次打包前都执行一次，类似于webpack的clean-wepack-plugin，可以清空bundle下的旧文件）

3、打开Xcode引入项目文件，.xcodeProj，RN 0.60.0以后的版本有不一样的后缀

4、右键打开项目同名的iotApp的菜单，Add Files to "RNIos"

5、选择bundle文件，在option中选择Create folder references

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

7、设置文件

修改ios目录下与项目同名的文件目录里边的: jsCodeLocation

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




NSURL *jsCodeLocation;



//测试



#if DEBUG



jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];



 



//正式



#else



jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];



 



#endif