React-Native ListView简单使用

前端之家收集整理的这篇文章主要介绍了React-Native ListView简单使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
/** * Created by Administrator on 2016/8/30. */@H_404_3@
import@H_404_3@ React,{Component} from 'react'@H_404_3@;
import@H_404_3@ {
    AppRegistry,StyleSheet,Text,View,ListView,} from 'react-native'@H_404_3@;

class@H_404_3@ ListViewG@H_404_3@ extends@H_404_3@ Component@H_404_3@ {@H_404_3@

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

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

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

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

}

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

module.exports = ListViewG;

猜你在找的React相关文章