React-Native 之ListView

最近在摸索react-native，虽然苹果爸爸已经在之前封杀了JSPatch，我还是抱着试一试的态度先学一个疗程，毕竟，知识嘛，多学点总是好的。

其实对于js我了解的不多，所以一些东西给不了相应的解释，还请见谅（ps：我的学习阶段都是从模仿开始的）。后面我会不断的学习基础知识，把相应的解释会添加上去的。见笑了！

接下来先学习一下如何创建一个ListView。

1.先设置一下样式

上代码：

//设置样式
const styles = StyleSheet.create({
 
 //整个listView的样式设置
  outerViewStyle: {
    //占满窗口
    flex: 1
  },

//一个自定义view的样式设置
  headerViewStyle: {
    height: 64,
    backgroundColor: 'orange',
    justifyContent: 'center',
    alignItems: 'center'
  },

//列表row的样式设置
  rowStyle: {
    //设置主轴的方向
    flexDirection: 'row',
    //侧轴方向居中
    alignItems: 'center',

    padding: 10,
    //单元格底部的线设置
    borderBottomColor: '#e8e8e8',
    borderBottomWidth: 0.5
  },

//分区头部view的样式设置
  sectionHeaderViewStyle: {
    backgroundColor: '#e8e8e8',
    justifyContent: 'center',
    height: 25
  }
});

以上就是本listView能用到的一些设置。

2.获取数据

用到的数据是本地的json数据

//调取数据
componentDidMount(){
    this.loadDataFromJson();
  },

var Car = require('./Car.json');
loadDataFromJson(){
    //获取json数据
    var jsonData = Car.data;

    //定义一些变量
    var dataBlob = {},
        sectionIDs = [],
        rowIDs = [],
        cars = [];

    for (var i = 0; i < jsonData.length; i++) {
      //1.把区号放入sectionIDs数组中
      sectionIDs.push(i);

      //2.把区中的内容放入dataBlob对象中
      dataBlob[i] = jsonData[i].title;

      //3.取出该组中所有的车
      cars = jsonData[i].cars;
      rowIDs[i] = [];

      //遍历所有的车数组
      for (var j = 0; j < cars.length; j++) {
        //1.把行号放入rowIDs[i]中
        rowIDs[i].push(j);
        //2.把每一行的内容放入dataBlob对象中
        dataBlob[i + ':' + j] = cars[j];
      }
    }

    //更新状态
    this.setState({
      dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
    });
  },

3.初始化函数

//初始化函数
  getInitialState(){

    //配置区数据
    var getSectionData = (dataBlob,sectionID) => {
      return dataBlob[sectionID];
    };

    //配置行数据
    var getRowData = (dataBlob,sectionID,rowID) => {
      return dataBlob[sectionID + ':' +rowID];
    };

    return {
      dataSource : new ListView.DataSource({

        getSectionData: getSectionData,//获取区中的数据
        getRowData: getRowData,//获取行中的数据
        rowHasChanged: (r1,r2) => r1 !== r2,
        sectionHeaderHasChanged: (s1,s2) => s1 !== s2

      })

    }

  },

  render() {
    return (<ListView />);
  },

4.配置数据

// 每一行的数据
  renderRow(rowData){
      return(
          <TouchableOpacity activeOpacity={0.5}>
              <View style={styles.rowStyle}>
                 <Text style={{marginLeft:5}}>{rowData.name}</Text>
              </View>
          </TouchableOpacity>
      );
  },

  renderSectionHeader(sectionData,sectionID) {
    return(
      <View style={styles.sectionHeaderViewStyle}>
        <Text style={{marginLeft:5,color:'red'}}>{sectionData}</Text>
      </View>
    );
  }

5.界面显示

render(){
    return (
      <View style = {styles.outerViewStyle}>
        <View style={styles.headerViewStyle}>
            <Text style={{color:'white',fontSize:25}}>车的品牌</Text>
        </View>
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            renderSectionHeader={this.renderSectionHeader}
        />
      </View>
    );
  },

上一个效果图：

这里写图片描述

由于本人也是刚刚窥探rn，所以很多地方都是不求甚解，所以很多地方没有给出相应的解释，还请见谅！这里给出源码，大家可以共同学习！

原文地址

怒戳我，得源码！