React Native与原生项目连接与发布
前面的各种环境配置按照官方文档一步一步来,挺详细,宝宝在这里就不多说废话了。
其次,前面的配置,我参照的这个博主的文章React Native 集成到iOS原生项目
下面是宝宝掉过的坑(半径15M):
终端报出的warning一定要重视:
官网上似乎漏掉了react的安装,如果之前没有安装过。
命令行:npm i react@15.2.1 --save我安装过程中,大部分的警告是有有些东西没有更新。根据具体的warning去问度娘,这里就不一一列举了。
cocopod安装过程Podfile记得在终端中用命令vim编写,否则很可能会出现引号的错误。宝宝在这里卡了一次部门聚餐的时间。
React Native原生项目集成发布版生成步骤
将原生集成的controller文件中的
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
注释反注释
NSURL * jsCodeLocation = [[NSBundle mainBundle]URLForResource:@"main" withExtension:@"jsbundle"];
没有自己写一个出来。
3. 运行命令行
```
react-native bundle --dev false --entry-file /Users/wust_zxl/Desktop/project_ing/MobileOA111/MobileOA/ReactComponent/index.ios.js --bundle-output main.jsbundle --assets-dest /Users/wust_zxl/Desktop/project_ing/MobileOA111/MobileOA/ReactComponent/
其中, ```/Users/wust_zxl/Desktop/project_ing/MobileOA111/MobileOA/ReactComponent/index.ios.js```是index.ios.js的目录,```/Users/wust_zxl/Desktop/project_ing/MobileOA111/MobileOA/ReactComponent/```是放react native配置文件的文件目录,根据自己的情况修改。。。
这个坑本宝宝用了一场乒乓球半决赛的时间。之前一直忘了添加后边的--assets-dest
命令,熟悉了iOS图片调用机制就不难理解了。
4. 第三部会生成一个main.jsbundle(命令行output取名),用xcode打开本项目,将其拖入项目中,这步很关键,[NSBundle mainBundle]获取的是xcode工程中的文件路径,而有些文件在xcode工程中找不到,拖进的main.jsbundle会指向该文件
React Native与原生项目连接与发布的更多相关文章
- React Native 导入原生Xcode项目总结与记录
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- React Native 系列(三) -- 项目结构介绍
前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...
- React Native移植原生Android
(一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...
- React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
- React Native之原生模块的开发(Android)学习笔记
目录 1.为什么我们需要原生模块开发 2.开发Android原生模块的主要流程 3.原生模块开发实战 1.为什么我们需要原生模块开发? 我们在用RN开发App的时候,有时候需要用到一些原生模块 ...
- 【React Native开发】React Native移植原生Android项目(4)
),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...
- React Native 在现有项目中的探路
移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...
- React Native for android 项目驱动教程
第一节 搭建开发环境 第二节 显示页面标题 第三节 实现页面布局 # React native是什么? React Native,是颠覆性的移动开发技术.它使用js开发,又是原生应用,不同于Hybri ...
- React native和原生之间的通信
RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: 1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript. 2)使 ...
随机推荐
- Cell.reuseIdentifier 指什么
Cell.reuseIdentifier 指的是 默认为空,如果不定义,在执行 [_tableView registerNib:templateCellNib forCellReuseIdentifi ...
- C++第二天学习
回顾: 1.第一个C++程序 头文件 输入输出 名字空间 using namespace std; 扩展名 编译方式 g++ 2.名字空间 3.结构.联合.枚举 4.字符串 标准库提供的表示字符串的类 ...
- js原生设计模式——2面向对象编程之继承—多继承
1.单对象克隆 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 响应的系统设置的事件——重写onConfigurationChanged响应系统设置更改
如果程序需要监听系统设置的更改,则可以考虑重写Activity的onConfigurationChanged(Configuration newConfig)方法,该方法是一个基于回调的事件处理方法: ...
- js判断ip地址,子网掩码,网关的逻辑性检查
因为要做静态地址配置的js校验,找了好多资料发现网上都是关于ip,mask的有效性检查,没有ip,submask,gateway的逻辑性判断,自己写下代码供需要的人参考. 普及下网关地址知识: 就是进 ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- [MyBatis]mapperLocations属性通配符的使用
http://blog.csdn.net/szwangdf/article/details/23432783 http://ljhzzyx.blog.163.com/blog/static/38380 ...
- 2017qq红包雨最强攻略,
这个只支持苹果手机,而且要有苹果电脑,只有苹果手机是不行的. QQ红包规则:只要你到达指定的位置,就可以领取附近的红包,一般也就几毛,还有几分的,当然也不排除有更高的,只不过我是没遇到... 那么既然 ...
- (五)Hololens Unity 开发之 手势识别
学习源于官方文档 Gestures in Unity 笔记一部分是直接翻译官方文档,部分各人理解不一致的和一些比较浅显的保留英文原文 (五)Hololens Unity 开发之 手势识别 HoloLe ...
- asp.net权限认证篇外:集成域账号登录
在之前的我们已经讲过asp.net权限认证:Windows认证,现在我们来讲讲域账号登录, 这不是同一件事哦,windows认证更多的是对资源访问的一种权限管控,而域账号登录更多的是针对用户登录的认证 ...