文档章节

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

前行的蜗牛
 前行的蜗牛
发布于 2016/03/27 22:07
字数 842
阅读 100
收藏 0

前言

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


。。。未完待续


© 著作权归作者所有

上一篇: margin详解
下一篇: css中的position
前行的蜗牛
粉丝 0
博文 7
码字总数 1074
作品 0
前端工程师
私信 提问
《React-Native系列》React-Native实战系列博客汇总

从2016年7月份开始,坚持写ReactNative系列博客,记录工作中遇到的点滴。 今天把博客汇总如下: 《React-Native系列》1、初探React-Native 《React-Native系列》2、RN与native交互与数据传递...

hsbirenjie
2016/11/07
0
0
欢迎进入阿钟的博客导航——快速查找所有博客

世上最遥远的距离,是我在if里你在else里,似乎一直相伴又永远分离;世界上最痴心的等待,是我当case你是switch,或许永远都选不上自己;世界上最真情的相依,是你在try我在catch。无论你发神...

a_zhon
2016/08/25
0
0
Native项目迁入React-Native过程中遇到的坑(0.4x版本)

转载请注明出处王亟亟的大牛之路 最近都在忙着搭架子,找框架,谈需求和开会。甚至都没有时间好好装逼,昨天帮安卓的小伙把项目从安卓整体迁移到了RN的项目下面,过程中遇到很多不可描述的坑...

ddwhan0123
2017/04/27
0
0
Android混合开发

前端周刊第 52 期:JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边 哈哈,互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口,讨论这件事情的文章很多,前端周刊就没有收录相...

掘金官方
2017/12/14
0
0
关于 React Native,您想知道的都在这里了

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5...

OSC源创君
2016/10/31
9K
20

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
10
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部