吐血推荐!React Native学习笔记(day03)

此篇干货出没,请小心!

现状:

很多公司项目历史都较为悠久,想要推翻用React-Native重写还是会有很多问题涉及到很多架构改动,许多时候,我们只是一些界面需要采用RN方案来实现,因此在这种情况下,我们要将React-Native集成到现有项目中。网上有很多资料,但是一些资料大多都是15年16年的,很多版本已经不适用,按其中方法接入会有各种坑。点击官方接入集成地址如果英文较好的小伙伴还是看官方的文档来操作比较权威。

调整一天我才顺利接入,先列举几个坑点,防止大家重复踩坑:
1.尽量用cocoapods集成,集成分为两种,一种使用cocoapods,另一种是不用cocoapods。官方推荐也是使用cocoapods安装,否则很多地方需要配置。
2.现在最新版本已经0.46,这个地方我之前的文章也提到过,国内网络环境下编译0.46版本可能会失败,推荐使用0.44.3版本来操作。
这边坑点还有很多,我先不在这边列举。跟着下面的文档,我会在其中描述,如果遇到其他问题,也欢迎留言交流。

下面开始动手操作集成:

1.新建一个react native项目,react-native init AwesomeProject这边AwesomeProject尽量用自己的工程名,这样后续操作会方便不少,当然不改名也无所谓。
2.新建个rn项目,我们只是利用下这个新建后的,package.json和node_modules。省去再npm install了。删除不必要的文件,留下node_modules和package.json,然后新建一个ios文件夹,将原来项目的根目录层全拷贝至ios文件夹。不上图,看文字操作可能还有误解,之前看了几篇博客都是这样。

简书1.png

这边还有个遗漏点:
package.js里改下react-native版本号,然后npm install一下,

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.3"
}

3.安装cocoapods,这个步骤我就不赘述了。一般iOS开发我相信都用过。
4.在刚才的ios文件夹下,创建Podfile文件,可以touch Podfile,也可以pod init。
5.创建完后,在里面引入React相关,根据自己需要引入。直接上干货,大家根据需要修改
platform :ios,’8.0’
# target的名字一般与你的项目名字相同
target ‘iportal’ do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    ‘RCTImage’,
    # 在这里继续添加你所需要的模块
  ]
  # 如果你的RN版本 >= 0.42.0,请加入下面这行
  pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

end

这边注意下,如果没引用,却在js代码中使用了,比如Text,那么编译不会报错,app会红色警告。

6.pod install,这步不多描述。
7.完成后,通过.xcworkspace打开,别用.xcodeproj打开,用过cocoapods的都知道。
8.打开后直接编译,可能会报错,那么别紧张。按照如下步骤排查。每个人出错原因都不一致,只能一步步排查。通常会有这个错,can't find xxx in i386之类。遇到这个问题是架构问题,将pod的build active Architecture Only与项目设置一致NO(如果有第三方要求yes,根据你需求改)。
Base SDK按项目的属性设置,lastest ios。这时候你会发现architecture已经变成armv7 armv7s arm64和项目一致了。这样再次cmd+b,神奇的发现success!如果还是fail,那么可以尝试重pod install,clean项目,再编译。这边还有其他办法,可以在stackoverflow搜索,我这只是一个解决办法。

测试一下:

到这步,我们已经完成了rn继承到原生iOS现有项目。但是我们还没写代码呢,怎么算完成。我们来测试一下。
我在根目录,新建了一个index.ios.js,与cellNew.js。用来测试一下加载。在xcode中,rn组件作为RCTRootView加载进来。在xcode中写:

initialProperties :nil                                      launchOptions    : nil];   ```
注意一下这边的moduleName与js端register的名字一样。`initialProperties`这边可以传递字典参数给js端。我就不展示用法了。后续文章会详解。效果如下:


![简书2.png](http://upload-images.jianshu.io/upload_images/1375161-db2f98b1b1b3dfe1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

推荐阅读更多精彩内容