ListView的簡單使用《一》—>普通圖文展示案例

ListView是React-Native的核心組件之一，也是我們經常使用的組件之一。用於高效地顯示一個可以垂直滾動的變化的數據列表。下面我們用實例來看看怎麼簡單的使用ListView。

使用ListView的第一步，就是要先給其添加數據源，數據源直接包含了列表的對應信息以及列表的行數／列數等信息，由於列表性能優化，需要對數據進行動態的加載，因此，我們需要在設置動態屬性的類的生命週期函數中進行賦值操作，具體如下：

getInitialState(){
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
    return {
        dataSource:ds.cloneWithRows(wineData),
    };
},

此處，rowHasChanged:(r1,r2) => r1 !== r2 此語句是指當row改變時，如果新賦值的內容與原內容不等，則需要對該行進行重新繪製。然後通過dataSource:ds.cloneWithRows(wineData) 對數據進行綁定，然後賦值返回以供後續使用。

數據源綁定好後，剩下的就是需要創建一個對應的ListView對數據源綁定的數據進行展示和輸出，和普通的創建控件是一樣的，在類的生命週期渲染函數render中添加控件。在此處將保存在state中的dataSource對ListView進行賦值綁定。並通過renderRow屬性設置每行顯示的內容，調用如下：

render(){
    return(
         <ListView
             style={styles.listViewStyle}
             dataSource={this.state.dataSource}
             renderRow={this.renderRow}
        />
    );
},

此方法爲重寫系統方法，返回具體的cell的內容：

 renderRow(rowData,sectionID,rowID,highlightRow){
     return(
         <View style={styles.cellStyle}>
             <Image source = {{uri:rowData.image}} style={{width:50, height:50}}/>
             <View style={styles.textsStyle}>
                 <Text style={styles.contentStyle}>{wineData[rowID].name}</Text>
                 <Text style={styles.moneyStyle}>{ '¥' + wineData[rowID].money}</Text>
             </View>
        </View>
     );
},

以上就可以顯示出Cell的內容了，那麼，如果我們想要對每個Cell都能點擊，則需要對Cell的內容添加可點擊選項，並設置onPress方法，進行具體的點擊後操作，如下代碼：

renderRow(rowData,sectionID,rowID,highlightRow){
      return(
          <TouchableOpacity activeOpacity={0.5} onPress={()=>this.cellPressed(rowID)}>
              <View style={styles.cellStyle}>
                  <Image source = {{uri:rowData.image}} style={{width:50, height:50}}/>
                  <View style={styles.textsStyle}>
                      <Text style={styles.contentStyle}>{wineData[rowID].name}</Text>
                      <Text style={styles.moneyStyle}>{ '¥' + wineData[rowID].money}</Text>
                  </View>
             </View>
          </TouchableOpacity>
     );
},

該方法爲點擊之後，進行具體操作的方法：

cellPressed(rowID){
    AlertIOS.alert('點擊了第' + ( rowID.toString()) + '行');
},

需要注意的是，並不是只能通過TouchableOpacity添加點擊事件，個人可以根據點擊需要什麼樣的效果和方式進行選擇，具體的也不在這詳述。

有了上面的內容，我們只能將數據展示出來，然而達不到需要展示的效果，通過設置CSS的style樣式，則能具體的修改顯示樣式，此處爲我的樣式：

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    listViewStyle:{
       marginTop:20,
    },

    cellStyle:{
        flexDirection:'row',
        padding:5,
        borderBottomWidth:1,
        borderBottomColor:'#e8e8e8'

    },

    textsStyle:{
        justifyContent:'center',
        width:(windowWidth - 80),
        marginLeft:10,
    },

    contentStyle:{
        fontSize:15,
        marginBottom:3,
    },

    moneyStyle:{
        color: 'red',
    },
}); 

效果圖如下：