React-Native 从零搭建App

​ 不知不觉也用了RN三个月了,从零基础开始,到现在快要上线了,一路也是坎坎坷坷。现在有些时间来总结一下吧。

​ 相信有不少是从ios 或者 android 转过来的,或者有一定的前端基础的。那么我就把这三个月的过程再来重新捋一捋,希望能帮到你。

基础储备

  • 什么是React-native,算了 自己查吧~

  • 环境搭建,相信难不倒你,谷歌度娘任你选,推荐用最新的React Native Versions.

  • 合适的文档你能帮助你节省很多时间.

  • 熟悉一下 js 语言特性,现在我用的js好像是ES6。原来用的OC和swift,直接转过来一时真的有点不适应弱类型语言,不过用起来是真的舒服。在开始,对布局呀,线程呀,还有像 promise,then,await一些关键字糊里也都糊涂的,相信过一段时间总会学好的。

    如果你已经决定开始使用了,和掌握一定的基础知识之后,那就接下来一起探索React-Native的世界吧

项目搭建

​ 开始搭建项目的时候,一般会确立一下的项目的基本结构,以及大概技术选型。

​ 项目的基本机构的话,通常都是Tabbar+Navigation,或者是draw也就是抽屉效果,技术选型的话,我是用的Redux体系(其实是被推荐这么用的)+react-native-navigation然后就开始动工了。

​ 恩,咦,啊?怎么弄,好吧,新手最重要的就要学会找教程,如何抱大腿,这篇React-Native从零搭建App,绝对适合你去搭建起来React-Native App,(其实我就是按照这个来的 2333

​ 如果你按照这个搞定了,那么就可以在界面上先练习练习布局UI,先体验体验。建议先看完入门基础.

​ 如果你不想使用Redux,还有类似的mobx-react,可以参考react-native-iShiWuPai,来帮你快速实现,不过个人比较推荐用Redux,因为在此基础之上我用到的有redux-logger,redux-persist,redux-reset,redux-saga,这些会帮你做很多东西,让让复杂的东西更加简单化.这里就不一一介绍了。上面的”React-Native从零搭建App“已经说的很清楚了。

项目进阶

​ 完成一个完整的App,用到的东西真的会很多,这时候就需要学会如何找库,合理的运用github,能节省你不少时间。(这里有几个小细节要提醒大家一下,因为React-native版本更新的快,在快速迭代中肯定很多库都会出现不兼容的情况,所以尽量找start多的,更新频繁的,就像2 years ago的库,就尽量别用了。

​ 废话少说,react-native-guide,想要什么搜一搜,没事可以看一看,真的很多,很满yo~还有这老哥的ReactNativeMaterials.

​ 什么?知道库不知道怎么装?乖乖的拿去,这里要说一下,在install 过程中,有些自动 link的是会各种报错,就自己有问题,怎么办,试试手动link,(其实自动link的就是代替了手动过程

​ 呃,什么?这些还不够用,那么试一试dva, Why is it called dva? From OverWatch.

​ 这时候你肯定左手枪,右手炮了。但是怎么用,怎么把利器发挥出来,就是coder你的使命了。

项目coding

​ 看到这,其实还是什么都不会是不是,遇到各种问题的话,还是从基础的来,推文航歌,有很多界面上零散的知识。

​ 还有这个,有很多js高级用法MDN Web Docs.多利用搜索,找到你想要的。

​ 努力复制粘贴吧,这是什么话,努力ctrlC + ctrlV 吧,骚年。

项目尾声

​ 如果你的界面和业务都处理的差不多了,这里几个小细节希望能帮到你

  1. 在RN项目中会有白屏现象的话,而且你用的是react-native-navigation,也就是要处理android的Splash Screen,推荐看这个,别瞎跑了,我搞了好几天.

​ 2. JavaScript 浮点数陷阱及解法

​ 3. 逆向传值,也就是原生和RN交互,如果你有rn解决不了的问题,为何不试试原生的写,但是要有两套代码哦~ 还要注意交互的开销。

结束

​ 如果你上述的都搞定了,我也基本上没什么可教的了. 或者接下来就是去探索React-native的原理了吧

​ 难点,理解RN的state,也就是Redux 中的,action,reducer, 还有怎么在saga中去处理component中的业务逻辑。让各个类各行其事~

福利时间

Dash 示例.png

补充

不定时更新哦~

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

推荐阅读更多精彩内容