1、新建bundle

在自己项目的ios文件夹下新建一个文件夹取名bundle

PS:ios文件夹和node_modules文件夹在同一级目录下,这个bundle文件夹名称随意取,后面要用到,但是记得在相应地方改一下就好了

2、修改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" //参数说明:

  --entry-file 指定入口文件 因为要打包ios平台,所以指定为rn项目的index.ios.js作为入口

  --bundle-output 指定输出的jsbundle文件路径和文件名 指定到rn项目的ios工程文件夹下,记得一定要先创建bundle文件夹,不然终端会报文件夹找不到的错误

  --platform 指定平台类型

  --assets-dest 指定资源文件夹路径 assets文件夹的路径,包含图片、node模块等资源

  --dev 是否为开发模式 如果设置为false,不会产生警告,并且bundle会被压缩

3、修改根目录 ./ios/项目名称/AppDelegate.m

  //电脑模拟器执行
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; //打包至真机执行
//jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];

4、编译

修改后执行 npm run bundle-ios,执行成功后会在新建的 bundle 内打包 index.ios.jsbundle 文件 如下图

5、用Xcode打开项目文件

拖入index.ios.jsbundle 文件选择create folder references

6、打包至手机

手机连接电脑(mac) 选择连接的手机  run 完美 !

遇到的问题

1、ReactNative出现错误问题'React/RCTAssert.h' file not found

https://www.cnblogs.com/shihao905/p/9296367.html

2、Signing for "rnDemoTests" requires a development team. Select a development

重新配置开发者账号,由自动配置改为手动配置

3、code signing is required for product type 'xxxxx' in SDK 'iOS 11.4'

2问题配置好没有这个问题

react native 打包至iphone设备的更多相关文章

  1. [React Native] Target both iPhone and iPad with React Native

    By default, React Native only targets iPhone - so if you run on an iPad, it will show up as a scaled ...

  2. [RN] React Native 打包时 减少 Apk 的大小

    React Native 打包时 减少 Apk 的大小 主要有两个方法: 在打包前设置 android\app\build.gradle 文件中 1) def enableProguardInRele ...

  3. React Native 打包.jsx文件

    最近在研究React Native.感觉开发效率确实不错,但jsx语法写起来感觉不怎么顺手. 试用了Sublime Text 3和Visual Studio Code写代码,感觉反应总是慢一拍. 还是 ...

  4. React Native适配IPhoneX系列设备之<SafeAreaView />

    SafeAreaView的目的是在一个“安全”的可视区域内渲染内容.具体来说就是因为目前有 iPhone X 这样的带有“刘海”的全面屏设备,所以需要避免内容渲染到不可见的“刘海”范围内.本组件目前仅 ...

  5. react native 打包Ignoring return value of function declared with warn_unused_result attribute

    从 github上下载 项目 用于学习查看别人的代码, 当执行完npm install  用xcode 打开 发现俩个错误提示Ignoring return value of function dec ...

  6. React Native 打包 Apk

    第一步:生成秘钥库 keytool -genkey -v -keystore opsmart-android-release-key.keystore -alias opsmart-android - ...

  7. react native 打包上架

    https://www.jianshu.com/p/ce71b4a8a246 react-native bundle --entry-file index.ios.js --platform ios ...

  8. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  9. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

随机推荐

  1. tf.expand_dims

    想要增加一维,可以使用tf.expand_dims(input, dim, name=None)函数 t = np.array(np.arange(1, 1 + 30).reshape([2, 3, ...

  2. TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片

    **TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片首先我们来看看淘宝的功能和样式:** 之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9 ...

  3. 编译原理--NFA/DFA

    现成的, 讲义: https://www.cnblogs.com/AndyEvans/p/10240790.html https://www.cnblogs.com/AndyEvans/p/10241 ...

  4. Tomcat的作用思考及NIO在Tomcat中的应用模型

    Tomcat的作用 平时写完web程序都是直接点击启动,就可以在本机浏览器访问了.但是仔细想想,我们似乎都没有写过浏览器与servlet通信的代码,也没有写过创建request.reponse的代码. ...

  5. 【leetcode】301. Remove Invalid Parentheses

    题目如下: 解题思路:还是这点经验,对于需要输出整个结果集的题目,对性能要求都不会太高.括号问题的解法也很简单,从头开始遍历输入字符串并对左右括号进行计数,其中出现右括号数量大于左括号数量的情况,表示 ...

  6. web前后端分离漏洞分析防御

    web前后端分离漏洞分析防御 漏洞分析,主要漏洞有 一.跨站脚本攻击XSS 程序 + 数据 = 结果:攻击后,数据夹杂一部分程序(执行代码),导致结果改变: 1.XSS攻击注入点 (a):HTML节点 ...

  7. 【CF1244D】Paint the Tree(树形DP,树)

    题意: n<=1e5,1<=a[i][j]<=1e9 思路: 不是很懂INF为什么要开到1e15,我觉得只要1e14就好 #include<bits/stdc++.h> ...

  8. centos7中yum安装lamp环境

    一.准备工作 1.1 环境 操作系统:centos7(CentOS-7-x86_64-Minimal-1708) 硬件:(这个根据项目运行和配置建议设置,一般我先配个1核1G) 1.2 关闭selin ...

  9. 台哥原创:java 扫雷源码

    扫雷,十年前大学时候开发的,界面参照的电脑自带扫雷游戏. 一直是我最喜欢的单机游戏,现在微软的新系统都不能玩了. 幸好还有自己开发的,可以过下瘾.程序员就有这点好处嘛. ​ 这几年陆陆续续,把这个扫雷 ...

  10. Linux远程登录工具XShell安装

    Xshell就是一个远程控制RHEL的软件:其他的还有很多,用什么都无所谓(根据公司情况). 下面我们来安装下这个工具: 双击exe 点下一步: 选 免费的 然后下一步:(免费的功能足够用了) 点接受 ...