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',
    },
}); 
           

效果圖如下：