最简单的ListView演练

学习资料：
React Native常用组件之ListView
中文官网

运行效果：

代码：

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

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

// 导入系统类库
var Dimensions = require('Dimensions');
var ScreenW = Dimensions.get('window').width;

 // 导入json
var Wine = require('./Wine.json'); // 数组

var ListViewDemo = React.createClass({
  // 设置初始值
  getInitialState(){
    // 设置数据源
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    // 返回数据
    return{
      dataSource: ds.cloneWithRows(Wine)
    }
  },

  render(){
    return(
        <ListView
            dataSource={this.state.dataSource} // 数据源
            renderRow={this.renderRow}
        />
    );
  },

  // 返回行(也就是tableView中的cell)
  renderRow(rowData,sectionID,rowID,highlightRow){
    return(
        <TouchableOpacity activeOpacity={0.8} onPress={()=>{AlertIOS.alert('点击了'+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 margin = 10;
 const imageW = 60;
 const rightMargin = 10;

 const styles = StyleSheet.create({
  cellViewStyle: {
    backgroundColor:'white',
    // 下划线
    borderBottomWidth:1,
    borderBottomColor:'#e8e8e8',
    padding:margin,
    // 主轴方向(商品图片和标题横向排列)
    flexDirection:'row',
  },
  leftImageStyle: {
    width:imageW,
    height:imageW,
    marginRight:rightMargin,
  },
  rightViewStyle: {
    justifyContent:'center',
  },
  topTitleStyle: {
    fontWeight:'bold',
    width:ScreenW - imageW - rightMargin - margin * 3,
    marginBottom:margin,
  },
  bottomTitleStyle: {
    color:'red',
    fontSize:15,
  },
});

AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);

Wine.json文件：

[
  {
    "image": "1.jpg",
    "money": "39",
    "name": "德国OETTINGER奥丁格大麦啤酒500ml*4罐/组"
  },
  {
    "image": "2.jpg",
    "money": "40",
    "name": "德拉克（Durlacher） 黑啤酒 330ml*6听"
  },
  {
    "image": "3.jpg",
    "money": "109",
    "name": "奥塔利金爵 啤酒500ml*12 匈牙利原装低度进口啤酒酒水饮品"
  },
  {
    "image": "4.jpg",
    "money": "158",
    "name": "德国啤酒 原装进口啤酒 flensburger/弗伦斯堡啤酒 土豪金啤 5L 桶装啤酒"
  },
  {
    "image": "5.jpg",
    "money": "66",
    "name": "青岛啤酒 经典 醇厚 啤酒500ml*12听/箱 国产 整箱"
  },
  {
    "image": "6.jpg",
    "money": "140",
    "name": "京姿 百威罐装330ml*24 啤酒"
  },
  {
    "image": "7.jpg",
    "money": "58",
    "name": "德国OETTINGER奥丁格自然浑浊型小麦啤酒500ml*4罐/组"
  },
  {
    "image": "8.jpg",
    "money": "695",
    "name": "Martell马爹利名士1000ML 进口洋酒 名仕干邑白兰地1L"
  },
  {
    "image": "9.jpg",
    "money": "108",
    "name": "奥美加银龙舌兰【OLMECA TEQUILA】38% 750ml"
  },
  {
    "image": "10.jpg",
    "money": "1386",
    "name": "人头马天醇XO特优香槟干邑白兰地700ml"
  },
  {
    "image": "11.jpg",
    "money": "1080",
    "name": "40°法国马爹利蓝带干邑白兰地700ml"
  },
  {
    "image": "12.jpg",
    "money": "598",
    "name": "沙皇伏特加塞珞700ml限量版"
  },
  {
    "image": "13.jpg",
    "money": "92",
    "name": "百加得黑朗姆酒 烈酒 750ml"
  },
  {
    "image": "14.jpg",
    "money": "99",
    "name": "Seagrams Gin 750ML 40度"
  },
  {
    "image": "15.jpg",
    "money": "1060",
    "name": "马爹利蓝带干邑白兰地 700ml"
  },
  {
    "image": "16.jpg",
    "money": "158",
    "name": "张裕解百纳干红葡萄酒双支礼盒 750ml*2"
  },
  {
    "image": "17.jpg",
    "money": "1230",
    "name": "爱之湾+兰贵人组合"
  },
  {
    "image": "18.jpg",
    "money": "138",
    "name": "菲卡珍藏莎当妮葡萄酒750ml"
  },
  {
    "image": "19.jpg",
    "money": "1580",
    "name": "拉图嘉利庄园干红葡萄酒"
  },
  {
    "image": "20.jpg",
    "money": "1890",
    "name": "报恩城堡干红葡萄酒 六支装"
  },
  {
    "image": "21.jpg",
    "money": "2360",
    "name": "豪克玛歌庄园干红葡萄酒 750ml 1支装"
  },
  {
    "image": "22.jpg",
    "money": "98",
    "name": "白浪莎庄园干红葡萄酒 750ml"
  }
]