ReactNative-ListView

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

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

import Request from './test/Request';
import TestCell from './test/TestCell'

const Dimensions = require('Dimensions');
const {width, height, scale} = Dimensions.get('window');

export default class DemoApp extends Component {

    constructor(props){
        super(props);

        var ds = new ListView.DataSource({
            rowHasChanged:(r1, r2) => r1 !== r2
        });

        this.state = {
            dataArr: new Array,
            dataSource: ds
        };
    }
  render() {
    return (
      <View style={styles.container}>
        <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => this._renderRow(rowData)}
            contentInset=
        >
        
        </ListView>
      </View>
    );
  }

  _renderRow(rowData){
      return(
        <TestCell wine={rowData}></TestCell>
      )
  };

  componentDidMount() {
      var url_api = 'http://wifi.3wchina.net/index.php/mobile/mobile/appapi';
      Request.get(url_api, (responseData)=>{
            // 取出所有的数据
            var data = responseData;
            
            this.setState({
                dataArr: data,
                dataSource: this.state.dataSource.cloneWithRows(data)
            });
        }, (error)=>{
            alert(error);
        });
  }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#e8e8e8'
    },
});

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

module.exports = {
    /**
     * 基于fetch的get方法
     * @method get
     * @param {string} url
     * @param {function} callback 请求成功回调
     */
    get: function(url, successCallback, failCallback){
        fetch(url)
            .then((response) => response.json())
            .then((responseText) => {
                successCallback(responseText);
            })
            .catch(function(err){
                failCallback(err);
            });
    }
};

import React, { Component, PropTypes } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    ScrollView,
    InteractionManager,
    DeviceEventEmitter
} from 'react-native';

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

class TestCell extends Component{
    // 构造
    constructor(props){
        super(props);

        this.state = {
            wine:this.props.wine
        };
    }

    render(){
        var wine = this.state.wine;
        return(
                <TouchableOpacity style={styles.viewStyle}>
                
                    <TouchableOpacity style={styles.leftView}>
                        <View style=>
                            <Text
                                style={styles.titleStyle}
                                numberOfLines={1}
                            >
                            {wine.title}
                            </Text>
                        </View>
                    </TouchableOpacity>
                </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    viewStyle:{
        flexDirection: 'row',
        backgroundColor: '#fff',
        borderBottomWidth:1,
        borderBottomColor: '#ccc'
    },

    leftView:{
        width: width * 0.7,
        height:44,
        flexDirection:'row',
        overflow:'hidden',
        alignItems:'center'
    }
});

module.exports = TestCell;