React-Native开发中的坑点实录

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