ReactNative之FlatList组件使用方法总结

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构类似仅数据不同。

FlatList更适用于长列表数据，且元素个数可以增删。和ScrollView不同的是它不立刻渲染所有元素而是优先渲染界面上可见的元素，还有就是ScrollView只是一个滚动视图容器，其中可以嵌套多个不同类型的标签元素。

FlatList组件必须设置的两个属性：data跟 renderItem。（不同于ListView需要dataSource跟renderRow。。）其中data是列表的数据源(一个js数组对象)，而renderItem则是从数据源中逐个解析数据然后返回一个设定好格式的组件来渲染。。。

 

来个小栗子：

////////////////////////////////////////////////////////////////////////

//我们用到了FlatList组件就要引入，当然别的必须的组件如react也要一并引入。。。

(export default) class FlatListData extends Component{

Constructor(){

Super();

This.state={

data:[

{key:val},........................无数个数据对象

]

};

}

 

Render(){

Return({

<view>

<FlatList

data={this.state.data}  //要遍历的数据源

renderItem={({item})=><Text>{item.key}</Text>}  //每遍历一个对象就通过键取值渲染到界面

/>

</view>

});

}

}