- 最近在使用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键盘遮挡输入框问题的解决
网友评论