React-Native开发中的坑点实录

蓝光95

从移动开发的角度来说,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开发的路很漫长,过了这山还有那山。

阅读 1.6k

科技创造未来
作为一名软件开发中,一定要做3件事。新技术的学习,这样你才能跟上时代的步伐;记录开发过程中踩过的坑...

一名从业多年的软件开发者,做过5年的iOS开发,做过一年的react-native开发,有iOS性能优化经验,IM开发...

173 声望
13 粉丝
0 条评论

一名从业多年的软件开发者,做过5年的iOS开发,做过一年的react-native开发,有iOS性能优化经验,IM开发...

173 声望
13 粉丝
文章目录
宣传栏