React Native 基础篇 之 ListView 产品列表实现

1.为了测试用的是本地图片，首先图片资源集成到项目中。

这里是android适配的项目 将图片资源放置在下面 通过json 方式访问

项目名称androidappsrcmainresdrawable

文件 NewWine.json

{
  "data":[
       {
            "image": "gujing","money": "102","name": "古井贡酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "jiangxiaobai","money": "103","name": "江小白酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "jigongshan","money": "104","name": "鸡公山酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "jiumenkou","money": "105","name": "九门口酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "langjiu","money": "106","name": "郎酒酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "maotai","money": "107","name": "茅台酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "shede","money": "108","name": "舍得历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "tianzhilan","money": "109","name": "天之蓝历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "xifeng","money": "110","name": "西风酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "xijiu","money": "111","name": "习酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "zhanggong","money": "112","name": "张弓酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },{
            "image": "zhangyu","money": "113","name": "张裕历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        }
  ]
}

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,TouchableOpacity,ListView,Image,Text,View
} from 'react-native';


import BadgeData from "./BadgeData.json";
import NewWine from "./NewWine.json";

let Dimensions = require("Dimensions");
let {width} = Dimensions.get('window');

export default class listViewDemo extends Component {
  
  constructor(props){
    super(props);
    //1.设置数据源
     let ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});
     //2.设置返回数据
    //  this.state = {dataSource:ds.cloneWithRows(Wine.data)};
    this.state = {dataSource:ds.cloneWithRows(NewWine.data)};
    thiz = this;
  }

  render() {
    return (
    <ListView
     dataSource={this.state.dataSource}
     renderRow={this._renderRow}
    />
    );
  }

  _onItemPress(e){
    let num = 0;
    if(Number.isFinite(e)==false){
      num = Number.parseInt(e)+1;
    }else{
      num = e+1;
    }
    console.log(">>>点击第 "+num+" 行");
  }

  _renderRow(rowData,sectionID,rowID,highlightRow){
    return(
      <TouchableOpacity activeOpacity={0.5} onPress={()=>{thiz._onItemPress(rowID)}}>
      <View style={styles.cellViewStyle}>
        <Image source={{uri: rowData.image}} style={styles.leftImageStyle} />
        <View style={styles.rightViewStyle}>
          <Text style={styles.topTitleStyle}>{rowData.name}</Text>
          <Text style={styles.bottomTitleStyle}>{rowData.money}</Text>
        </View>
      </View>
      </TouchableOpacity>
    );
  }


  
}

const styles = StyleSheet.create({
  cellViewStyle:{
    padding:10,backgroundColor: 'white',borderBottomWidth:0.5,borderBottomColor:"#e8e8e8",flexDirection:'row',},leftImageStyle:{
    marginRight:15,width:60,height:60
  },rightViewStyle:{
   justifyContent:"center",width:width*0.8,topTitleStyle:{
   color:"red",fontSize:20,bottomTitleStyle:{
   color:"blue",}


});

代码链接：http://pan.baidu.com/s/1o7NBJF8 密码：1l9y

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!