在现有iOS项目中导入Reacr-Native项目

1.环境

首先电脑上必须要有运行ios项目和react-native的环境,以下说明都是基于,react-native以下简称RN,iOS项目的环境就不用说了,RN的环境准备需要

Homebrew:运行以下命令安装

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

Node:运行以下命令

brew install node

为了避免以后过程中执行npm命令慢的问题,请用以下评论把npm的地址切换到淘宝镜像,这样设置是全局的,以后再执行npm install时会很快

npm config set registry http://registry.npm.taobao.org

安装react-native开发环境

执行 sudo npm install -g react-native-cli

运行到此,就可以创建一个基础的RN的HelloWorld了。在终端上cd 到你的项目文件夹,执行react-native init 项目名就可以初始化你的第一个RN项目了,注意!!!在你的所有路径了避免中文名称,因为我在之前路径中包含了中文名称后,在打包第三方的时候出现很多看不懂的错误!!!刚才init的helloworld在一系列下载后你直接进入到ios文件夹就可以执行你的项目了。

Cocoapods:这是管理第三方库用的工具,因为当你集成RN项目后需要在项目里用到RN的第三方库,所以要用到这个工具。

运行这个命令安装:sudo gem install cocoapods

此时你又会遇到安装不了的原因,因为被墙,所以你又要去切换镜像来安装

gem sources -l   查看你当前的gem地址

gem sources --remove https://rubygems.org/

上面的https://rubygems.org/就是查看的gem地址,需要切换地https://ruby.taobao.org/

切换地址的命令

gem sources -a https://ruby.taobao.org/

咱们之后就要用cocoapod去setup,执行pod setup,这个是coocapods在设置master,设置好master之后,就是去RN项目的目录下,cd到这里,这里说一下目录结构,认为还是按照官方RN项目的结构来比较好.

主目录:包含这ios项目的文件夹,index.ios.js文件,package.json文件。

你可能不会有js和json的那个文件,去创建一个,这里说明下,index.ios.js文件就是相当于你的视图层,所以里面的代码都是跟页面展示有关的东西。你可以按照这个样来写一个简单的例子。



其中TestNativeAndReact为你项目名字,这个是需要以后跟本地工程里面注册有关系,所以你需要记住并更改为你需要的固定的值。

在去编辑package.json文件,这个文件里包含这rn需要的库信息等,你可以按照以下来编辑


里面name字段改成上边说的项目名称。接下来咱们要去ios工程下编辑Podfile文件,这里写的是ios工程里需要的rn库。


如果你的目录和我上边说的目录是吻合的那么podfiel按照这样写就可以,否则需要更改上边的path目录。

做完上面的则就是万事具备只欠东风了,而东风就是一些列的命令。

在终端里进入RN项目的目录,不是ios项目的目录。执行

npm install  等待过后,目录下会多出node_modules这个文件夹里面包含这各种库的文件。然后 cd ios ,就是进入你本地的ios项目里,执行 pod install 等一会,会出现咱们经常运行的wrokspace文件,咱们打开后,就能看到里面是包含着rn库的本地ios项目了。


咱们为了测试一下看看能不能运行出来,就添加一个view,继承uiview,像这样

然后你就可以运行看效果了,在运行前你必须打开本地的rn服务,终端 进入ios项目的上层目录,就是rn项目的主目录,执行,react-native start  ,在xcode里运行项目,你就可以看到效果啦。有什么其他问题可以在下方留言。以后我还会写出如何不用cocoapods直接集成到本地项目,和安卓版本的集成。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 天阴沉,心却依旧浮躁,静不下来,今天犯贱似的加了我前男友,明知道没有可能还是手贱,网恋在我心中永远是个结,无法解开...
    洛小乙阅读 117评论 0 0
  • 勤能补拙。 你可以不聪明,但不能太懒惰。 整天抱怨什么都不会,然后回家就是葛优躺,北京瘫,煲剧,逛街。就是不去学,...
    渔点新阅读 1,119评论 2 2
  • 开始“最美残疾人”评选投票以来,我就经常心慌慌。 投票开始的第一天,就不断有状况发生。先是投票页面打不开,然后有人...
    真冉阅读 167评论 4 0