专栏首页岑志军的专栏ReactNative-ListView

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

相关文章

  • HTML5-css样式分类

    czjwarrior
  • OC和Swift互相跳转

    czjwarrior
  • HTML5-CSS布局

    czjwarrior
  • 数据异构重器之 Canal 初探

    提到 Canal,大家应该都能想到这是一个用于解析 MySQL binlog 日志的工具,并将 MySQL 数据库中数据同步到其他存储介质中,例如 Elasti...

    丁威
  • 完全理解React Fiber

    Fiber是对React核心算法的重构,2年重构的产物就是Fiber reconciler

    ayqy贾杰
  • 深度学习算法(第30期)----降噪自编码器和稀疏自编码器及其实现

    深度学习算法(第29期)----可视化自编码器和无监督预训练 今天我们一起学一下降噪自编码器和稀疏自编码器方面的知识。

    智能算法
  • Mockito鸡尾酒第一杯 Java单测Mock

    并不浓烈,但是喝一杯下去,脸上会泛起红晕,象少女的羞涩。味道很清新,有一点青涩、有点甜蜜。

    测试老树
  • 人工智能和云计算让芯片业洗牌,英特尔成了最大输家

    陈桦 编译自 ZDNet 量子位 报道 | 公众号 QbitAI ? 人工智能、云计算、大数据、物联网,以及移动性的发展正在改变半导体行业的现状,而这次行业洗牌...

    量子位
  • redis 学习(20)-- 常见的持久化开发与运维问题

    Redis在执行 fsync 的时候,redis 为了保证 AOF 文件安全性,会校验上次 fsync 的时间是否大于2秒。若超过2秒,会发生阻塞。

    希希里之海
  • Kotlin Vocabulary | 内联类 inline class

    *特定条件和情况 这篇博客描述了一个 Kotlin 试验性功能,它还在调整之中。本文基于 Kotlin 1.3.50 撰写。

    Android 开发者

扫码关注云+社区

领取腾讯云代金券