React Native入门(六)之列表组件的使用(1)
前言这篇文章来了解一下相关列表组件的使用,这些组件在展示数据的时候比较有用!在Android中有ScrollView,ListView等!那么对应的RN中也有类似的组件! ScrollView没错,在RN中也有ScrollView这个滚动视图组件,跟Android中的ScrollView一样,功能一样,用法呢也一样! <ScrollView> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> <Text style={{fontSize: 20}}>我是可以滚动的!</Text> ... </ScrollView>
当然里边的组件可以是文本 长列表对比Android中的ListView,RN中也有 在RN v0.43出现版本两个新的列表组件取代了 FlatList这个呢跟ListView基本上一毛一样,适于展示长列表数据,且元素个数可以增删。和ScrollView不同的是,FlatList并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。
我们还是来对比ListView, class FlatListTest extends Component {
render() {
return (
<View style={flatListStyles.container}>
<FlatList
data={[
{key: '大护法'},{key: '绣春刀II:修罗战场'},{key: '神偷奶爸3'},{key: '神奇女侠'},{key: '摔跤吧,爸爸'},{key: '悟空传'},{key: '闪光少女'},]}
renderItem={({item}) => <Text style={flatListStyles.item}>{item.key}</Text>}
/>
</View>
);
}
}
;
const flatListStyles = StyleSheet.create({
container: {
flex: 1,paddingTop: 22
},item: {
padding: 10,fontSize: 18,height: 44,},})
AppRegistry.registerComponent('AwesomeProject',() => FlatListTest);
SectionList
对于SectionList的简单使用呢,需要了解下边3个属性:
看一个例子: class SectionListTest extends Component {
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{title: 'L',data: [{key: '李四'}]},{title: 'W',data: [{key: '王五'}]},{title: 'Z',data: [{key: '赵六'},{key: '张三'}]},]}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
/>
</View>
);
}
}
;
const styles = StyleSheet.create({
container: {
flex: 1,sectionHeader: {
paddingTop: 2,paddingLeft: 10,paddingRight: 10,paddingBottom: 2,fontSize: 14,fontWeight: 'bold',backgroundColor: 'skyblue',() => SectionListTest);
另外一个需要注意的点: <SectionList
sections={[ // 不同section渲染不同类型的子组件
{data: [...],key: ...,renderItem: ...},{data: [...],]}
/>
结语本篇文章介绍了常用列表组件FlatList和SectionList的简单使用,关于列表组件涉及到的内容是比较多的,所以分两篇学习,在下一篇文章将学习为FlatList添加分割线,header,footer,空数据视图,下拉刷新,上拉加载等进阶的内容! 好了,下篇见! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |