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

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": "张裕历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        }
  ]
}

2.listViewDemo.js 界面  主意红色部分 如果不用初始化指定 会报错，应该是this对象改变了在回调方法里

/**
 * 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