前面的各种环境配置按照官方文档一步一步来,挺详细,宝宝在这里就不多说废话了。

其次,前面的配置,我参照的这个博主的文章React Native 集成到iOS原生项目

下面是宝宝掉过的坑(半径15M):

终端报出的warning一定要重视:

  1. 官网上似乎漏掉了react的安装,如果之前没有安装过。

    命令行:npm i react@15.2.1 --save

  2. 我安装过程中,大部分的警告是有有些东西没有更新。根据具体的warning去问度娘,这里就不一一列举了。

  3. cocopod安装过程Podfile记得在终端中用命令vim编写,否则很可能会出现引号的错误。宝宝在这里卡了一次部门聚餐的时间。

React Native原生项目集成发布版生成步骤

  1. 将原生集成的controller文件中的NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";注释

  2. 反注释

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与原生项目连接与发布的更多相关文章

  1. React Native 导入原生Xcode项目总结与记录

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  2. React Native 系列(三) -- 项目结构介绍

    前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

  3. React Native移植原生Android

    (一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...

  4. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

  5. React Native之原生模块的开发(Android)学习笔记

      目录 1.为什么我们需要原生模块开发 2.开发Android原生模块的主要流程 3.原生模块开发实战   1.为什么我们需要原生模块开发? 我们在用RN开发App的时候,有时候需要用到一些原生模块 ...

  6. 【React Native开发】React Native移植原生Android项目(4)

    ),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  7. React Native 在现有项目中的探路

    移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...

  8. React Native for android 项目驱动教程

    第一节 搭建开发环境 第二节 显示页面标题 第三节 实现页面布局 # React native是什么? React Native,是颠覆性的移动开发技术.它使用js开发,又是原生应用,不同于Hybri ...

  9. React native和原生之间的通信

    RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: 1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript. 2)使 ...

随机推荐

  1. lower_bound和upper_bound算法实现

    lower_bound算法要求在已经按照非递减顺序排序的数组中找到第一个大于等于给定值key的那个数,其基本实现原理是二分查找,如下所示: int lower_bound(vector<int& ...

  2. DataTable.DataRow的复制

    经常遇到这种错误,“此行已属于另一个表”的错误,导致这个错误的语句如下: dtPriceTable.Rows.InsertAt(aDataRow,i); 或者 dtPriceTable.Rows.Ad ...

  3. bzoj3942——2016——3——15

    题目大意: 3942: [Usaco2015 Feb]Censoring Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 220  Solved: 11 ...

  4. Windows server 2008 R2 64位系统安装ZendOptimizer-3.3.0a-Wind

    如果不安装ZEND的话,一些PHP网站程序使用ZEND加密后就无法使用,比如DISCUZ,SHOPEX,ECSHOP等,所以要想安装这些程序,ZEND是一定要安装的,要不会出现乱码等问题. 安装ZEN ...

  5. 定制自己的Unity脚本模板

    有时候想给脚本添加符合自己编程习惯的内容,或是一些个性化信息.而作为一个多多少少有点强迫症的人,这种东西要加就得每个脚本都加上,不然看着多不爽! 于是就得每添加一个脚本就去修改一下,很麻烦. 但是,在 ...

  6. 第6组UI组件:ViewAnimator及其子类

    ViewAnimator是一个基类,它继承了FrameLayout,因此它表现出FrameLayout的特征,可以将多个View组件“叠”在一起.ViewAnimator额外增加的功能正如它的名字所暗 ...

  7. HDU -2100-Lovekey

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2100 这题开始一直想着先把26进制转换成10进制,在转换成26进制,又200个字符因而行不通, 直接卡 ...

  8. Windows Server 2008 R2 允许远程桌面连接这台计算机是灰色解决办法

    发现在给"远程协助"打钩时,是灰色的没法钩上,也就没办法开启.这是因为Windows Server 2008 R2的安全性已经被微软设计的很高,默认刚安装上Windows Serv ...

  9. 一个web应用的诞生--使用模板

    经过了第一章的内容,已经可以做出一些简单的页面,首先用这种方式做一个登录页面,首先要创建一个login的路由方法: @app.route("/login",methods=[&qu ...

  10. 持久层框架之MyBatis

    1.mybatis框架介绍: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并 ...