关闭

React-Native ListView简单使用

1460人阅读 评论(1) 收藏 举报
分类:
/**
 * Created by Administrator on 2016/8/30.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
} from 'react-native';

class ListViewG extends Component {

    /**
     * 初始化数据
     * @param props
     */
    constructor(props) {
        super(props);
        //基本都是些固定写法
        //第一步
        var ds = new ListView.DataSource({rowHasChanged: ((r1, r2) => r1 !== r2)});
        this.state = {
            //数据源
            //第二步
            dataSource: ds.cloneWithRows([
                'Android', 'IOS', 'React-Native', 'H5', 'JAVA', 'OC', 'Go', 'Swift', 'C', 'C++', 'C#', 'Python', 'PHP'
            ])
        }
    }

    render() {
        return (
            <View style={{paddingTop: 20, flex: 1}}>

                <ListView
                    //第三步 设置数据源
                    dataSource={this.state.dataSource}
                    // 写法一
                    // renderRow={(rowData) => <Text style={{height: 150, fontSize: 20}}>测试数据{rowData}</Text>}
                    //写法二
                    //第四步渲染每行数据也就是对每行数据的布局样式
                    renderRow={this.renderRow}
                />
            </View>
        )
    }

    /**
     *
     * @param rowData       数据源
     * @param sectionID     组ID
     * @param rowID         行ID
     * @returns {XML}
     */
    renderRow(rowData, sectionID, rowID) {
        return (
            <Text style={styles.row}>测试数据{rowData + '\n组ID' + sectionID + '\n行ID' + rowID}
            </Text>
        )
    }

}

const styles = StyleSheet.create({
    row: {
        height: 80,
        fontSize: 20,
        //布局优化当写此属性时只会加载屏幕能看到数据
        overflow: 'hidden'
    }
});

module.exports = ListViewG;
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:447131次
    • 积分:5334
    • 等级:
    • 排名:第5273名
    • 原创:151篇
    • 转载:9篇
    • 译文:0篇
    • 评论:123条
    最新评论