ReactNative IOS 编译运行打包

最新推荐文章于 2024-08-19 11:42:48 发布

wgwxf

最新推荐文章于 2024-08-19 11:42:48 发布

阅读量1.1k

点赞数

文章标签： reactnative ios

本文链接：https://blog.csdn.net/wgwxf/article/details/88534834

版权

零、开场白

公司第一款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目录打开。

引入离线包

Add Files to “RNIos”
选择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