ReactNative IOS 编译运行打包

零、开场白

公司第一款ReactNative APP，android打包很简单，IOS遇坑很多，记录下。

一、生成bundle文件

新建bundle目录

在生成的RN工程中，找到ios目录，在该目录下新建bundle目录

进入项目目录

在package.json中添加scripts：

"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"

运行：

tyarn run bundle-ios 或 npm run bundle-ios

命令解释：

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

执行成功后可以在ios目录下bundle中看到包含的离线资源：

二、在Xcode中集成

Xcode打开项目

选择RN项目内ios目录打开。

引入离线包

1. Add Files to “RNIos”
   
2. 选择bundle文件,在option中选择Create folder references
   添加到项目中的文件夹必须是蓝色
   

设置AppDelegate.m文件

修改AppDelegate.m中的加载包的方式（只需修改一次）,之后项目会自动跟据debug还是release状态加载不同的包，修改包的位置指向bundle/index.ios

NSURL *jsCodeLocation;
#ifdef DEBUG
     //开发包
     jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
     //离线包
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
#endif

真机调试

如果你需要在真机上启用调试功能，则需要打开RCTWebSocketExecutor.m文件，然后将其中的"localhost"改为你的电脑的IP地址，最后启用开发者菜单中的"Debug JS Remotely"选项。

打包运行

将项目由debug状态改成release状态，Xcode–>Product–>Scheme–>Edit Scheme…

选择 Generic iOS Device ,修改Version和Build号

三、异常处理

编译报错，提示“‘React/RCTBundleURLProvider.h’ file not found”

sudo npm install -g react-native-cli
如果速度慢：
sudo npm config set registry https://registry.npm.taobao.org --global
sudo npm config set disturl https://npm.taobao.org/dist --global

报错“Signing for “qbank_rn” requires a development team. Select a development team in the project editor. (in target ‘qbank_rn’)”

编译成功，运行报错“(evaluating ‘v.registerApp’)” “libc++abi.dylib: terminating with uncaught exception of type NSException”

项目中用到了react-native-wechat，需要按照官方教程配置：
https://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-ios.md
https://www.jianshu.com/p/3f424cccb888

当然别忘了react-native link