1.為了測試用的是本地圖片，首先圖片資源整合到專案中。

這裡是android適配的專案 將圖片資源放置在下面 通過json 方式訪問

專案名稱\android\app\src\main\res\drawable

檔案   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",
   fontSize:20,
  }


});

程式碼連結：http://pan.baidu.com/s/1o7NBJF8 密碼：1l9y