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

效果图如下：