React-Native开发中的坑点实录

从移动开发的角度来说,iOS和Android都有自己的一些UI特性,所以react-native宣称的写一套代码就可以通用就是骗人的鬼话,实际开发中,你会发现很多控件在iOS和Android上展示的效果不一样,或者有些属性支持iOS不支持Android。react-native早期是只支持iOS的,后来才支持的Android,所以直到现在react-native对iOS平台的支持还是比Android平台要友好。

UI方面

  • 1.textinput组件默认会在输入框中加一条线,很难看,实际开发中,需要设置underlineColorAndroid='transparent'属性,去掉Android系统下默认的线。

  • 2.由于iOS和android平台自己的特性,导致同一个组件在iOS上能达到设计的UI效果,在android上有可能达不到效果,这种情况就需要使用import {组件原名 as 别名} from '组件来源',引入同名的第三方组件,针对不同的平台进行UI的效果展示。

  • 3.react-native对iOS支持了阴影效果,Android没有,这种情况下,只能找第三方组件进行支持,或者采用切图的方式进行支持。

  • 4.要实现毛玻璃效果,网上查了好多资料,都推荐react-native-blur这个库,但是这个库也是对iOS支持的很好,对Android就不是那么友好。iOS端的支持组件嵌套的方式,而且不需要设置image的ref,就可以实现毛玻璃效果,而且毛玻璃下层的视图可以动态展示(比如轮播图);Android的则不行,不能采用组件嵌套的方式,而且一定要设置图片的ref,换言之,就是只支持对一张静态图做毛玻璃效果。

  • 5.对于键盘遮挡的处理,iOS和Android触发的事件不一样,所以需要针对不同的平台进行单独的处理。

  • 6.当前组件的状态的更新的时候,使用setstate()更新的时候,会导致原本应该显示的Toast提示,不能显示,这个时候应该在Toast显示方法的回调中进行state的刷新。

方法支持的差异

实际开发的过程中,会发现有一些方法,针对iOS有效果,Android平台上,运行结果却不一样,这种情况下,要么再找一个两端都支持的,要么就是针对不同的平台用不同的方法。

  • 1.startWith()判断字符串的前缀的,实际开发中的,发现在iOS平台运行结果正确,Android运算结果不正确,打印数据,发现数据是正确的。于是就发现了startWith()对于android的http链接判断不起作用,改用indexOf()这个包含字符串的方法后,两端的运行结果都正确了。

  • 2.对于空格的删除,在实际开发中,需要对用户输入账号和密码时,输入的空格进行删除。实际操作的时候发现,Android平台下,无论你连续输入多少个空格,只要用户停下输入,使用正则表达式过滤字符串中的空格就能生效,实现删除空格的效果;iOS平台却只能删除一个空格,如果你连续输入多个空格,中间会出现一个点,多余的空格,正则表达式也不起效果。这一点打了iOS的脸啦

redux框架的坑

redux框架采用状态判断的形式进行业务逻辑的处理。实际开发的工程中,一定要保证业务逻辑判断的状态不能有相同的情况,否则很出现一些灵异的bug。我在开发登录&注册流程时,当时因为是不同的页面,用的状态的判断是一样的(注册时的输入验证码和忘记密码时的输入验证码,跳转逻辑一样)。由于redux的AppState状态是全局的,而且注册到忘记这条线,走的是push页面的方式。忘记密码的时候,出现了push两次输入密码框页面的情况,找了好久,通过打印页面的跳转方式,才从这个坑,从里面爬出来。

这个bug出现的原因是对redux这种全局状态机制不了解,没有把已经入栈页面的状态判断方法屏蔽掉,导致后面走忘记密码的时候,注册页面的跳转密码框的状态满足的情况下,也进行了跳转。

总结

使用react-native进行开发,你一定要做好随时遇到坑的准备,时刻准备着去填坑。react-native开发的路很漫长,过了这山还有那山。

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

推荐阅读更多精彩内容