React-Native 挖坑锦集

  • 最近在使用react-native开发公司的项目。遇到很多坑,为了不让以后自己遗忘,提笔写下此文。

1.ListView中数据刷新问题?
在项目中,遇见了数据刷新的问题。当界面中创建了ListView后,rn直接将ListView按照数据源的形式给初始化了。但是,例如在_renderRow里面加载视图的时候,需要对此视图进行刷新,此时,你会发现renderRow里面只会在ListView出现的时候刷新一次,此后并不会刷新。所以,你会想到使用setState的方式,进行全局刷新,但是,renderRow只能刷新一次,即使用setState方法。
解决方法:使用renderRow传递的data进行刷新即可。


2.关于rn中动态绘图机制。
这个坑挺大的,如果不认真看文档,你还真不知道如何处置这种问题。我们使用rn自带的art来做线的描述,具体的操作方法网上都有详细的介绍。此问题解答的关键在以下方法的使用:我们使用的是rn的手势响应系统,那么,此系统有以下几个方法:

// 要求成为响应者:
onStartShouldSetPanResponder: (evt, gestureState) => true

onStartShouldSetPanResponderCapture: (evt, gestureState) => true

onMoveShouldSetPanResponder: (evt, gestureState) => true, 

onMoveShouldSetPanResponderCapture: (evt, gestureState) => true

具体的可以去官网查看,这里我们需要说的是参数evt与参数gestureState,这是两个不同的参数,有不同的意思。
简单的说,evt是可以获取当前用户的触摸点的坐标(相对于父视图),而gestureState获取的则是当前用户的触摸点,此触摸点的坐标永远是(0,0)开始的。具体的请看PanResponder;


3.关于rn中refs的运用
当我们给组件定义ref的时候,有两种方式可以获取到这个控件的refs:

  • 利用this.refs.[name]
  • 利用this.refs[name]
    两种方法各有各的好处,请按需求使用。
    但是,按照官网上说,此方法已经被废除掉,我们有一种新的写法:
<Button ref={(c)=>{this.button=c}}

最后通过,this.button来获取当前组件的值。当然,你也可以用ES5。
此ref其实很有用处,例如你写一个组件,对其公开方法可以进行得到调用。非常方便与实用。


4.redux分析
redux 分为三个模块:reducer,action与cotainer。
reducer 是解决一切处理结果的结果。
action 是解决一切处理动作的集合。
container 则好比一个组件容器,用来连接组件与处理的方式。
往往在action中,包含了处理方式的集合和处理方式的类型,一般而言,通过处理方式的类型(actiontype)转接到reducer中处理。而action中也包含了处理方式的动作(处理函数),在组件中引用aciton,来解决某一动作需要的结果。通常使用dispatch函数构造。
具体的过程网上都有详细的介绍,可移步至此解读Redux的原理


5.ES6数组遍历
数组遍历在js里面有很多方式。

for (var i=0 ; i <10; i ++){} //原始的for
for in //遍历字典的好方法,普遍用来遍历"键值对",遍历数组会有缺陷
forEach //ES5添加进来的方法,用法与for遍历差不多
for of //ES6推荐遍历的方法:避免了for in的缺陷,支持break,continue,return
map //映射,产生新的数组,注意有return

6.flex盒子模型各个关键字的结果

'flex-start':内容从开头开始分布
'flex-end':内容从结尾开始分布
'center':内容居中分布
'space-between':内容从两边开始分布
'space-around':内容随宽度的大小平均分布

这些都是flex模型帮我们定义好的,如果有需求的话,可以按照这些方式来排布。但是,如果是项目有自己的需求,建议使用flex-start+margin布局你的项目UI。


7.键盘遮挡问题
(1)具有iOS经验的程序员来说,有一个第三方框架可以直接解决这个问题,移步IQKeyboardManager
(2)也可以使用监听的方式解决,跟iOS开发是一样的解决方式,监听键盘的高度,然后上移ScrollerView即可。

componentDidMount: function () {
  DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
  DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
},
//注意移除这些监听
componentWillUnmount: function () {
  DeviceEventEmitter.removeAllListeners('keyboardWillShow')
  DeviceEventEmitter.removeAllListeners('keyboardWillHide')
},
配合contentInset={{bottom: ()}即可以解决问题

另外,上网查询时,此博客讲的比较详细,有兴趣可以移步React-native键盘遮挡输入框问题的解决

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容