【ReactNative】学习笔记(二)

山重水复与柳暗花明

�在项目中,我才学会一个词,叫做“迭代”。小时候,总以为任何事情,不做则已,做则做好。于是,在每个细节上都分外认真,总希望是踏踏实实一步一个脚印的走过每一个坑。但后来却发现,有些坑,在这个时间点,你真的走不过,那为什么不绕路,先去解决其他的坑呢?毕竟,一个项目,坑不只一个,这个坑解决不了,并不代表其他的坑就不能解决。这是一个看“结果”的年代,也许存在一个bug的结果总比卡在一个bug其他都没有做的结果要好一点。这是我的小小思考,因我真的是那个,一路走,一路撒下bug的人儿呢~

很感恩,在工作的里面,可以不断经历自我的破碎,体会上帝的智慧,这是工作以来,第二次学习如何解决bug的能力吧。这些本该在我读书的时候,就学会的技巧,没有想到,在工作的里面,依然在学习。祂给的功课,从不会忘记,因祂总会在最好的时间再次提醒。


拍照及读取图库的组件

读取图库或者启用相机拍照的组件,最为经典的是image-picker,有1300+的星,react-native-image-picker地址。水水的自己原本只会使用自己写的组件import到新的组件中,或者直接使用RN官方提供的组件,最难的也不过是Navigator,但第一次使用第三方组件,却连他们在git上的说明文档都看不懂,其实,自己也真的够水了的。

关于image-picker的使用说明作者已经说的很清楚,但我当时,真的不明白他到底是什么意思,直到看到这篇文档,React-Native 调用相机Android or IOS。在这篇文章中,作者将Android环境下的配置是非常的明了,但iOS也比较简明,因他知道,iOS真的很简单,但我就是配置失败,我不明白,$react-native link 到底是什么意思?我已经link,为什么还是失败呢?原来,link后面是要加上第三方组件的名字的。

link第三方的组件

学习看懂第三方组件的说明文档,才可以使用他们的文档呀,学习需要变通,哎,姑娘,不得不说,要走的路还很长呢!目前,可以调用该组件实现如下的情况。如何进一步修改其文字或者布局等,可以再研究。但这个组件只是调用,并不能保存,因此这是存留的问题哦~需要再调用其他的组件将图片保存下来。

image-picker调用后的情形

Camera组件的学习大概花费了两天左右的时间,但最后搞好时,大概只用了一个小时,学习的成本好高呀。为什么会有这么久呢?是我最初看到这个组件的时候,我发现我不会使用,于是,我就去寻找其他的组件,看看是否有我会使用的,然而,看来看去,我依然不会使用,却浪费了非常多的时间。专注解决问题,而不是徒然慌乱的寻找解决方案,是image-picker中要学习的。最后神的怜悯是我看到Android下如何使用该组件的文章,我才开始理解组件的说明中那些是什么意思。也许我还要学习的是,也许一个环境搞不定,那就去修改解决问题的描述再进行查找,变换思路,而不是执拗到底。后来又发现实际应用中是需要对图片进行编辑,比如当图片大小超过选定范围时,可以取其上部而并非总是图片中部,就需要使用编辑属性allowsEditing,将其设定为true。其中,ios是可以对图片进行编辑的,至于选择的区域,是可以拖动,android本来就不支持编辑。


日期组件

日期组件的问题与Camera基本相似,不断的寻找最适合的组件,却不会调用每一个组件,也是两天的时间,但却没有任何意义的花费。

有前辈给介绍了日期组件:React Native日期组件。当他陪着我一起将该组件使用起来的时候,他也教会了我很多。但最后却发现,该组件没有minuteInterval最小间隔时间,比5分钟,10分钟的时间间隔,而只有1分钟的时间间隔,因需求上不满足而放弃。


Mask组件

当四天之后,在Camera和日期上并没有任何进展时,整个人都对自己深深的绝望时,早上起来,却被圣灵提醒,我是真的什么都做不了吗?我花费了四天的时候收获了什么呢?并不是说,我不该认真研究解决bug,但应当有智慧,何时自己独立解决问题,何时请教他人,何时放弃一个bug,在时间的里面,一定是有美好的顺序的。我后来才想到,如果一个问题,我认真努力,变换解决思路,两个小时之后,我依然不能解决时,我可以请教他人。在与他人认真讨论,描述清楚需求但依然没有更好的解决方法时,三个小时候,也可以选择暂时放弃这个bug。这样,不会出现四天的时间都在同样的bug,却不是致命的bug上,也不会耽误工作里其他的进度。

当我被圣灵提醒,想明白这一点时,我开始想,目前除了日期和Camera,还有没有其他我可以做的?我想到了我一直没有勇气尝试的主页中的list。那些list一定是一个封装好的组件以不同的数据展现出来了而已。我不知道如何调用不同的数据在Listview中展示,但可以尝试封装一个组件。Modal组件是一个在当前页面可以弹出另一个东西的组件,我之前以为只能是弹出对话框等,但跟前辈们讨论过才发现,Mask遮罩也是利用Modal组件。Modal的属性有不同的值时有不同的效果,具体可看react-native-modalbox。但知道可以使用该组件产生自己想要的效果时,我开始研究该如何使用。

也许是学生时代沿袭而来的坏习惯,当看到一点点的不熟悉,就很想问人。我知道要在一个文件中看看Example如何出现的,但我看到那么多的代码时,还是不愿意花心思去看。但问过前辈之后,还是自己默默的研究,知道最后走到ES5与ES6不兼容的代码。(在同一个项目里,所有的js当都使用ES6)接下来,当考虑如何点击编辑按钮就可以弹出Modal了,因目前的情况是点击没有反应,后来前辈给的建议是在当前按钮上绑定bind(this)

ES5与ES6导出与引入的不同

这些似乎导入本地组件的方式,那如何导入网上install的组件呢?

ES5与ES6导入网上第三方组件

具体描述下点击按钮报错的情形吧,我希望点击“open”按钮时,就可以打开Modal,但却有如下的报错,前辈给的建议是 openModel = ()=》{} 或者 this.openModeal.bind(this)

this的问题?

当控制台打印的 navigator对象引用 为undefined 时,说明在renderScene中没有传入navigator。如何没有传入navigator,那怎么可能调整成功呢?所以,可以 方法一  把 导航传进去  方法二 写回调方法(也就是说,在点击这个按钮的时候  回调  写push),因我实在不能理解回调并活学活用,前辈教我将导航传进去,如下所示:(这就是:组件和组件的传参

在子组件中传入导航

当后来的某一天,我突然明白,原来页面也是一个大组件,那些自定义的组件也是组件,只是在大组件里的子组件,是可以传参的。组件间使用props可以传参即标签的形式。很久之后的某一天,也许我会懂得,组件间传参(组件在页面中,组件就可以拿到this.props)与页面间通过push传参的不同。在页面间传参时,B页面可以通过this.props.name来获得A页面所传递的属性值;也可以在A页面设定回调函数,B页面往A页面传值就是调用回调方法把值写上A页面就可以使用这个值啦。


布局依然有问题

据说TextView的坑很多,但我还没有遇到那么多,因我还很水…但目前遇到的是布局,我为一个编辑框设置为多行输入,但placeholder却在整个输入框垂直居中了,而且,删掉了整个页面的垂直居中都还有问题,唯独不能使placeholder靠顶部提示,后来有前辈提示说,在多行输入框的外面增加View组件,并不为该组件定位除了marginTop或者padding其他的样式,余下的再定义……


那些迷茫

当自己依然很迷茫,不知道如何学习RN时,前辈问了我几个问题,RN的思路是什么,模块化组件是什么意思,生命周期是什么,JS的基本操作比如如何操作对象与数组,state与props的熟悉度……

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

推荐阅读更多精彩内容