react-native－那些年我遇到的那些坑

前言

新人一枚，刚刚接触react-native ，许多坑被踩到，本文将持续纪录我在开发时遇到的坑，也或许不是坑只是我没有合理的运用react-native,但我相信，很多像我一样的新人可能都会经历这样一个阶段。本文不仅仅纪录了我遇到的问题，也纪录了我的成长，当然也许作为老手的你在看到本文纪录的问题的过于简单请不要笑，因为我正在成长，当然如果大神的你，看到本文存在问题，请您务必指出问题，已方便我大家认识并已正确的姿势运用react-native！本文记录方式也会从问题的描述，问题的原因，以及问题的解决方案这几种反式进行！

那些年别人踩过的坑

1.双平台差异：https://github.com/beefe/react-native-platform-difference

路上“偶遇”坑

1.TextInput 在设置value时

问题描述：当对其设置value且不做任何事件绑定时，你会发现你输入任何值或者删除时，都不会有任何效果，这跟html的input框完全不一样啊，但是我又想有默认的value值怎么办？

问题解决方案：

    1.添加事件 通过添加onChange事件的监听并拥有以下回调函数将可以帮你搞定这个事情

() {
        .({searchString.nativeEvent.text});
    }

    2.给它添加 defaultValue 就可以了，你如果没想到这种解决方式的话，就表明你应该认真看文档了，因为文档里面有这个属性和这个属性的描述

2.怪异的borderWidth表现

注：最开始发现存在问题的时候，并没有发现是border不对，而是发现背景出现了问题，背景的四周出现了不明“物体”围绕，开始还以为是错误的添加了什么组件。不过最终定为了，但是原因是什么我现在也没搞清楚，如果你看到这，并明白这个问题到底是为什么的话，请给出原因吧，将不胜感激。

相关介绍请看这篇wiki：react-native border的怪异现象(背景出现异常)

3.TextInput两次点击问题

问题描述：存在两个TextInput时，当第一个被focus时，想切换到第二个时，需要点击两次才能被focus

问题原因：因为我的TextInput放在了ScrollView／ListView中，所以产生了这样的“特效” 仔细阅读下面这段话（摘自官网介绍ScrollView组件介绍http://reactnative.cn/docs/0.22/scrollview.html#content）

keyboardShouldPersistTaps bool 

当此属性为false的时候，在软键盘激活之后，点击焦点文本输入框以外的地方，键盘就会隐藏。如果为true，滚动视图不会响应点击操作，并且键盘不会自动消失。默认值为false。

解决方案：

    1.完全可以不把TextInput放在ScrollView或者ListView里面嘛（哈哈。。。）

    2.设置keyboardShouldPersistTaps为true就可以来嘛！当然这样会存在键盘收起的问题，这就要看你的实际需求啦，在合适的时候手动将键盘收起就可以了，你可能会问我，如何手动收起来，找到TextInput元素通过ref获取，然后调用blur()就可以关闭了。

。。。未完待续

转载于:https://my.oschina.net/wlybhy/blog/648228