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',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，所以很多地方都是不求甚解，所以很多地方没有给出相应的解释，还请见谅！这里给出源码，大家可以共同学习！

原文地址

怒戳我，得源码！