iOS Native项目集成React Native

公司想要尝试一下react native,虽然之前有过一些reactjs的开发经验,但将rn集成到native项目毕竟没干过,于是在google上搜了一大堆的教程,感觉都不怎么详细,没办法,自己动手吧!下面是我记录的详细步骤,以及遇到的坑:

先说说环境搭建吧,由于我是使用pod管理react native的各种依赖库,所以大家请先提前安装好cocoapods,至于怎么安装我就不详细说了,网上找下教程,很简单的,

1,cd到native项目所在的目录;

2,创建package.json文件,内容如下:

{

  "name": "MyReactNativeApp",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start"  

  }

}

3,安装JavaScript依赖库

方案一,通过yarn安装,如何安装yarn以及环境变量配置:

安装yarn及配置环境变量

1)yarn add react-native

2)yarn add react@version_printed_above

# warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

# 版本号是在安装react-native时通过警告告知的,如react@16.2.0

方案二,直接在package.json中指定react-native、react的版本号

{

  "name": "intlApp",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start"

  },

  "dependencies": {

    "react": "16.3.1",

    "react-native": "^0.54.1"

  }

}

1)npm install

4,将node_modules加入.gitignore文件

5,安装Command Line Tools,通过在Xcode中指定

Xcode -> Preferences... ->Locations -> Command Line Tools选项中选择相应的版本

6,更新Podfile,执行pod install

pod 'React', :path => './node_modules/react-native', :subspecs => [

    'Core',

    'CxxBridge', # Include this for RN >= 0.47    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43    'RCTText',

    'RCTNetwork',

    'RCTWebSocket', # Needed for debugging    'RCTAnimation', # Needed for FlatList and animations running on native UI thread    # Add any other subspecs you want to use in your project  ]

  # Explicitly include Yoga if you are using RN >= 0.42.0  

pod 'yoga', :path => './node_modules/react-native/ReactCommon/yoga'  

# Third party deps podspec link  

pod 'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'  

pod 'glog', :podspec => './node_modules/react-native/third-party-podspecs/glog.podspec'  

pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

至此,我们已经搭建好环境,并且成功的将react native集成到native项目,剩下的就是编写rn代码了。

7,在项目根目录创建index.ios.js文件,同时编写其他rn组件

8,运行打包器,启动开发服务器

npm start

遇到的坑:

1,首先要确保pod的版本>=1.2.0

这是一个巨坑,在此之前,我的pod版本是1.1.1,在后面搭建环境的过程中真是吃尽了苦头,不是这个头文件找不到,就是那个头文件找不到,在未意识到是我pod版本不对之前,我是通过修改node_modules目录下引用的第三方库的podspec文件以及修改xcode project的搜索路径来解决,但这真不是一个好的解决办法,解决一个引用问题又会出现另一个引用问题,没完没了,后来,感谢万能的stackoverflow,让我找到了问题的根本原因,原来是pod 1.1.1版本有bug,会导致xcode找不到第三方库的头文件,1.2.0及以上的版本修复了这个bug,直接升级pod后,头文件找不到的bug消失。

2,Argument list too long: recursive header expansion failed

在解决第一个问题后,编译又会报上面的问题,简要描述就是用户设置的搜索路径是递归查找的,最后导致路径太长,最终头文件引用失败,知道原因后,我就去xcode搜索哪些path是设置为recursive的,果然,在taget->Build Settings->User Header Search Paths下的路径果然是recursive,改为non-recursive后,问题解决

3,Cocoapods私有库

通过pod管理react native依赖的第三方库,其中有三个库是直接从本地的node_modules目录指定的:

pod 'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'

pod'glog', :podspec => './node_modules/react-native/third-party-podspecs/glog.podspec'

pod'Folly', :podspec => './node_modules/react-native/third-party-podspecs/Folly.podspec'

但是,这其中的某个库需要依赖boost-for-react-native,在运行的时候,xcode会报boost-for-react-native找不到的错误,问题是鬼知道是因为cocoapods私有版本仓库没有包含boost-for-react-native的podspec文件,从而导致boost-for-react-native没法下载呢?而且这个库都不需要在Podfile中指定。一般情况很难会往这个方向想,大部分人的第一反应是xcode配置有问题?rn环境没搭好?等等。最后在花了我差不多一个多小时后,我突然灵机一动,会不会是由于我的私有仓库导致的?上传boost-for-react-native的podspec文件到私有版本仓库后,问题解决。

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

推荐阅读更多精彩内容