最近在摸索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，所以很多地方都是不求甚解，所以很多地方沒有給出相應的解釋，還請見諒！這裡給出原始碼，大家可以共同學習！

原文地址

開發交流群: 860196537