前言
新人一枚,刚刚接触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()就可以关闭了。
。。。未完待续