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=
        >
        
        </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=>
                            <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;

运行效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏浅探ARKit

ARKit中控制.dae动画的播放

4.用时间控制动画--CAAnimation 里的 timeOffset 控制开始时间 duration控制播放时间

80070
来自专栏葡萄城控件技术团队

挂载非引用Assembly中的事件

有两个 Assembly A,B 在A中声明了一个事件(某个类中的某个事件), B没有引用这Assembly ,但是想挂A中的这个事件。当A中的某个逻辑fire...

20550
来自专栏Java成神之路

Java微信公众平台开发_04_自定义菜单

自定义菜单中请求包的数据是Json字符串格式的,请参见:  Java_数据交换_fastJSON_01_用法入门

16430
来自专栏五毛程序员

五毛的cocos2d-x学习笔记08-动画

20350
来自专栏菩提树下的杨过

Silverlight:利用异步加载Xap实现自定义loading效果

关键点: 1.利用WebClient的DownloadProgressChanged事件更新下载进度 2.下载完成后,分析Xap包的程序集Assembly信息 ...

232100
来自专栏Rindew的iOS技术分享

iOS地图找房(类似链家、安居客等地图找房)

34460
来自专栏Petrichor的专栏

tree指令

21120
来自专栏菩提树下的杨过

ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)

这一节,我们将看到ExtJs功能强大的可编辑网格控件,几乎与VS.Net的GridView功能一样了,但是ExtJs的可是纯JS的UI 一.静态示例(改自Ext...

73850
来自专栏Rindew的iOS技术分享

iOS实现三列表格点选(附Demo)

22230
来自专栏進无尽的文章

编码篇-iOS开发中的奇巧小伎

最近搜集了自己以前的笔记中的一些小知识点,归为这篇文章,都是亲测有效的奇巧小伎,当你使用到时,你会大呼过瘾的。

14110

扫码关注云+社区

领取腾讯云代金券