03-React Native搭建TableView展示界面

新建项目

react-native init MyApp --version 0.44.3

在iOS图片目录里面添加图片
把Wine.json拷贝到项目根目录

直接上代码
index.ios.js

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

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

var wine = require('./Wine.json');

var Dimensions = require('Dimensions');
var screenWidth = Dimensions.get('window').width;

var ListViewDemo = React.createClass({
  //设置初始化的值
  getInitialState(){
      // 1.1 设置数据源
      var dataS = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
      // 1.2 设置返回数据
      return{
        dataSource:dataS.cloneWithRows(wine)
      }
   },
  render() {
    return(
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />
    );
  },

  // 返回具体的cell
  renderRow(rowData,sectionID,rowID,highlightRow){
    return(
      <TouchableOpacity
        activeOpacity={0.5}
        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 styles = StyleSheet.create({
  cellViewStyle:{
    padding: 10,
    backgroundColor: '#F5FCFF',
    //下划线
    borderBottomWidth:0.5,
    borderBottomColor: '#e8e8e8',

    //确定主轴的方向
    flexDirection: 'row'
  },
  rightViewStyle:{
    //主轴的对齐方式
    justifyContent:'center'
  },
  leftImageStyle:{
    width: 60,
    height: 60,
  },
  topTitleStyle:{
    color: '#222222',
    fontSize: 15,
    width:screenWidth * 0.7,
    marginBottom: 8,

  },
  bottomTitleStyle:{
    color: 'red',
  }
});

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

package.json

{
    "name": "MyApp",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-alpha.6",
        "react-native": "0.44.3"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0-alpha.6"
    },
    "jest": {
        "preset": "react-native"
    }
}

image.png image.png