ReactNative-ListView

这只是一个简单的listView的小demo

欢迎访问我的个人博客

初始化项目之后，index.ios.js代码如下

/** * 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={{top: 44}}        >        </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);

封装简单的get请求

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);            });    }};

cell代码如下

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={{width:width * 0.7}}>                            <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;

运行效果如下：