RN ListView 列表

最新推荐文章于 2021-08-26 16:08:46 发布

原创最新推荐文章于 2021-08-26 16:08:46 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

RN 专栏收录该内容

11 篇文章

订阅专栏

cell.js

import  React, {Component} from  "react";
import  {
    View,
    StyleSheet,
    Dimensions,
} from "react-native"

const {height, width} = Dimensions.get('window')

export  default  class Cell extends Component {

    render() {

        return (
            <View style={style.container}/>
        );

    }

}

const style = StyleSheet.create({
    container : {
        margin : 10,
        backgroundColor : "red",
        height : 100,
        width : (width - 40) / 2.0
    },
});

index.ios.js

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
} from 'react-native';
import Cell from "./cell"

export default class ListViewCell extends Component {

    constructor(props) {
        super(props);

        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource : ds.cloneWithRows(["1", "2", "3", "4"])
        }

        this._renderRow = this._renderRow.bind(this);
    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this._renderRow}
                contentContainerStyle={styles.container}/>
        );
    }

    _renderRow(data) {
        return (
            <Cell />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection : "row",
        flexWrap : "wrap",
        justifyContent : "flex-start",
        backgroundColor: '#F5FCFF',
    },
});

AppRegistry.registerComponent('ListViewCell', () => ListViewCell);

效果如下