React Native学习之路(8) - FlatList更好
2017-07-24 本文已影响166人
woow_wu7
http://www.jianshu.com/p/4c1392c8669f
http://www.jianshu.com/p/31e3cb511c73
http://blog.csdn.net/liu__520/article/details/69254479
http://www.jianshu.com/p/c464a2688663
（属性）http://www.jianshu.com/p/47a2ad2bf527
(1) FlatList 滑动组件
- (1) 属性
必须属性：
data：列表数据，
renderItem：每行的渲染组件，一般返回一个View
其他属性：
ItemSeparatorComponent：分割线，一般返回一个View
ListFooterComponent：结尾组件，一般返回一个View
ListHeaderComponent：头组件，一般返回一个View
horizontal：设置为true则变为水平列表
numColumns：列数，默认一列
columnWrapperStyle：numColumns大于1时，设置每行的样式
getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销，此属性为异步执行，滑动太快容易显示空白
refreshing：是否正在加载数据
onRefresh：下拉刷新数据，需要一个方法
onViewableItemsChanged：当一个新的Item渲染或者隐藏的时候调用此方法。参数：info: {viewableItems: Array, changed: Array} viewableItems：当前可见的Item，changed：渲染或者隐藏的Item
scrollToEnd({params?: ?{animated?: ?boolean}})：滚动到末尾，如果不设置getItemLayout属性的话，可能会比较卡
scrollToIndexparams: {animated?: ?boolean, index: number, viewPosition?: number}：滚动到制定的位置
scrollToOffset(params: {animated?: ?boolean, offset: number})：滚动到指定的偏移的位置
- (2) 示例代码
render() {
return(
<View>
<FlatList
data={this.state.dataArray} //数据源
renderItem={ this._renderItemView.bind(this) }
//渲染列表，类似于listView的renderRow
onEndReached={ this._onEndReached.bind(this) } //上拉加载
onEndReachedThreshold={500} //距离多大时上拉加载
onRefresh= { this._onRefresh() }
refreshing={ this.state.refre}
ListFooterComponent={ this._ListFooterComponent.bind(this) }
//类似listView的renderFooter，加载小菊花的载体
/>
</View>
)
}
----------------------------------------------
例子2：
四列布局，注意：
（1）numcolumns是多列的时候，horizontal必须是false;
（2）columnWrapperStyle是每一行的样式；
-----------------------------------------------
<FlatList
data={ faxian }
renderItem={ this._faxian.bind(this) }
numColumns={ 4 }
horizontal={ false }
columnWrapperStyle={{justifyContent:'space-between',alignItems:'center',paddingLeft:20,paddingRight:20, paddingTop:20}}
>
</FlatList>
(2) ActivityIndicator
显示一个圆形的loading提示符号。
<ActivityIndicator
animating={this.state.animating} //是否要显示指示器，默认为true
style={[styles.centering, {height: 80}]}
size="large" //指示器的大小。small的高度为20，large为36。
color="white" //滚轮的前景颜色
hidesWhenStopped：当停止动画的时候是否隐藏，默认true隐藏
/>
(3) array.map(callback,[ thisObject]); （ map在这里是映射的意思）
-
- array.map(callback,[ thisObject]); （ map在这里是映射的意思）
-
callback的参数也类似：
[].map(function(value, index, array) {
// ...
});
-------------------------------------------------------------------
例一：
map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方：
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
return item * item;
});
alert(arrayOfSquares); // 1, 4, 9, 16
callback需要有return值
--------------------------------------------------------------------
例二：
data1 = dataJson.data;
i++;
data1.map( (item)=> {
dataList.push({ //dataList是全局定义的空数组
key: i,
value: item
})
i++;
} )
(4) React-Native中的点击事件
(1) 可点击的组件 ( onPress属性 )
- 在需要捕捉用户点击操作时，可以使用"Touchable"开头的一系列组件。这些组件通过onPress属性 接受一个点击事件的处理函数。（当一个点击操作开始并且终止于本组件时（即在本组件上按下手指并且抬起手指时也没有移开到组件外），此函数会被调用。）
- (1) TouchableHighlight
- (2) TouchableNativeFeedback ( Feedback是反馈的意思 ) (android会形成墨水涟漪的视觉效果)
- (3) TouchableWithoutFeedback
- (4) TouchableOpacity
