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开发的路很漫长，过了这山还有那山。