首页 > 其他分享> 文章详细

1ReactNative IOS 编译运行

2021-03-31 10:29:10 阅读：158 来源： 互联网

标签：index -- ios IOS bundle 编译报错目录 1ReactNative

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

Powered by Ad.Plus

执行成功后可以在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

修改debug状态

将项目由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

标签：index,--,ios,IOS,bundle,编译,报错,目录,1ReactNative
来源： https://blog.csdn.net/zb313982521/article/details/115344100

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

1ReactNative IOS 编译运行

零、开场白

一、生成bundle文件

二、在Xcode中集成

三、异常处理