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 条评论
登录 后参与评论

相关文章

来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(53)-工作流设计-我的批阅

前言:由于工作原因工作流一直没时间更新,虽然没有更新,但是批阅和申请差不多,改变一下数据的状态字段就行,有几个园友已经率先完成了 说句实话,一个工作流用文章表达...

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

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

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

6815
来自专栏進无尽的文章

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

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

1121
来自专栏Java成神之路

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

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

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

Flash/Flex学习笔记(52):使用TweenLite

TweenLite是第三方出品的专用于各种缓动动画的类库,其性能据说已经超过了Adobe官方的Tween. 从网上找到了一篇中文的说明文档:http://fil...

2035
来自专栏ShaoYL

Quartz2D知识点聚合案例

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

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

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

19810
来自专栏逸鹏说道

逆天通用水印扩展篇~新增剪贴板系列的功能和手动配置,卸除原基础不常用的功能

常用技能:http://www.cnblogs.com/dunitian/p/4822808.html#skill 逆天博客:http://dnt.dkil.n...

27810
来自专栏Golang语言社区

Go中的依赖注入

I have written a small utility package to handle dependency injection in Go (it'...

2284
来自专栏ios 技术积累

ios 一款集成方便的二维码扫描

做项目要用到二维码扫描,在git上搜索到了LBXScan开源库很不错,详细的可以下载demo,我只是使用了部分功能因此pod中只导入了

2102

扫码关注云+社区