React Native填坑之旅--ListView的Section Header
来源:互联网 发布:有限元软件开发招聘 编辑:程序博客网 时间:2024/05/23 12:05
React Native自己实现的ListView还有一个隐藏功能那就是Section。Section在文档里连一句话都没有给足,但确确实实的是内置的。使用Section可以给数据分组,并且每一个Section都有一个Header。Section Header可以像iOS的TableView的Section Header一样在滑动的时候保持当前的Section Header浮动在Table View的最上部。
在iOS上,只要添加了Section和Section Header以后,Section Header的行为就一定是和iOS的TableView的Section Header 一致的。这个在Android上还没有测试。
数据源的变化
要使用Section,那么首先一开始就需要告诉数据源不仅要考虑行的变化还要考虑Section Header的变化:
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2, sectionHeaderHasChanged: (s1, s2) => s1 !== s2 });
然后就要考虑数据的变化了。之前只需要一个数组就可以完成的,现在需要数据可以明确的区分出Section。最简单的一个数据源应该是这样的:
this.state = { dataSource: ds.cloneWithRowsAndSections({ 'section1': ['1'], 'section2': ['row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2'] }) };
单独的看数据是这样的一个形式:
{ 'section1': ['1'], 'section2': ['row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2'] }
绘制的变化
在没有Section的时候,绘制很简单。只需要实现一个renderRow
的方法。现在就需要考虑绘制Section Header了,方法就是renderSectionHeader
。和renderRow
方法一样,两个方法都是返回一个视图组件。比如:
_renderSectionHeader(data, sectionID) { if (sectionID === 'section1') { return null } return ( <View style={styles.section}> <View style={{flex: 1}}><Text>category 1</Text></View> <View style={{flex: 1}}><Text>category 2</Text></View> <View style={{flex: 1}}><Text>category 3</Text></View> </View> ); }
拼接起来
以上的内容就是使用一个Section方法都需要的只是了。非常简单,但是官网居然不把这些内容放出来。
下面贴出了ListView 部分的代码,完整代码可以移步这里。
/* * Copy Right 2016 Uncle Charlie * * @flow*/import React, { Component } from 'react';import { View, Text, ListView, StyleSheet} from 'react-native';export default class SectionListView extends Component { state: {dataSource: any}; constructor(props: any) { super(props); const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2, sectionHeaderHasChanged: (s1, s2) => s1 !== s2 }); this.state = { dataSource: ds.cloneWithRowsAndSections({ 'section1': ['1'], 'section2': ['row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2'] }) }; this._renderRow = this._renderRow.bind(this); this._renderSectionHeader = this._renderSectionHeader.bind(this); } _renderRow(data, sectionID, rowID) { let heightStyle = (sectionID === 'section1' && rowID === '0') ? {height: 100, backgroundColor: 'white'} : {} return ( <View style={[styles.row, heightStyle]}> <Text>{data}</Text> </View> ); } _renderSectionHeader(data, sectionID) { if (sectionID === 'section1') { return null } return ( <View style={styles.section}> <View style={{flex: 1}}><Text>category 1</Text></View> <View style={{flex: 1}}><Text>category 2</Text></View> <View style={{flex: 1}}><Text>category 3</Text></View> </View> ); } render() { return ( <ListView style={styles.list} dataSource={this.state.dataSource} renderRow={this._renderRow} renderSectionHeader={this._renderSectionHeader} /> ); }}var styles = StyleSheet.create({ list: { marginTop: 64, }, row: { height: 50, backgroundColor: 'white' }, section: { height: 30, backgroundColor: 'green', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }});
0 1
- React Native填坑之旅--ListView的Section Header
- React Native填坑之旅--ListView篇
- React-Native 填坑之ListView(item更新)
- react native 填坑之旅
- react-native 填坑之旅
- React Native填坑之旅--Button篇
- React Native填坑之旅--动画篇
- React Native填坑之旅--HTTP请求篇
- React Native填坑之旅--LayoutAnimation篇
- React Native填坑之旅--Flow篇(番外)
- React Native填坑之旅--Navigation篇
- React Native填坑之旅--class(番外篇)
- React Native填坑之旅--布局篇
- React Native填坑之旅--组件生命周期
- React Native填坑之旅--与Android模块通信
- react-native 填坑之旅 数据库存储 realm
- React Native填坑之旅--与Native通信之iOS篇
- react-native Navigator 填坑
- android 开发零起步学习笔记(八):android studio 中代码上画横线代表什么意思
- Android 处理音频焦点 AudioFocus
- Java如何自学以及Java知识点简要概括
- Spring Boot (三)集成spring security
- FAQ: Oracle Database 12.1 Oracle Home User On Windows (文档 ID 1529702.1)
- React Native填坑之旅--ListView的Section Header
- OCR文字识别软件从文件选项中创建PDF文档的教程
- 第一节 概念
- 素数晒法、素数Rabin测试、快速幂取模
- 一个Java后台程序的实例
- eclipse 相关问题
- ssh 免密码登录
- Python3 爬虫(二) -- 伪装浏览器
- smarty半小时快速上手入门教程