RN实现ListView

来源：互联网发布：旅行商问题算法matlab 编辑：程序博客网时间：2024/06/05 07:49

（1）实现单个item

import React, {Component, PropTypes} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Dimensions,    Platform,    Image} from 'react-native';const {width, height} = Dimensions.get('window');export default class GDHotCell extends Component {    static propTypes = {        image: PropTypes.string,        title: PropTypes.string,    };    //RawText " " must be wrapped in an explicit <Text> component    render() {        return (            <View style={styles.container}>                <Image source={{uri: this.props.image}} style={styles.icon}/>                <View>                    <Text numberOfLines={3} style={styles.txt}>{this.props.title}</Text>                </View>                <Image source={{uri: 'icon_cell_rightarrow'}} style={styles.arrow}/>            </View>        );    }}const styles = StyleSheet.create({    container: {        flexDirection: 'row',        alignItems: 'center',        justifyContent: 'space-between',        backgroundColor: 'white',        width: width,        height: 100,        borderBottomWidth: 0.5,        borderBottomColor: 'gray',        marginLeft: 15,    },    icon: {        width: 70,        height: 70,    }    ,    arrow: {        width: 10,        height: 10,        marginRight: 30,    }    ,    txt: {        width: width * 0.6,    }    ,});

（2）生成整个listview

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,    Image,    ListView,    Dimensions} from 'react-native';import NavBar from '../main/GDNavBar';import Cell from '../main/GDHotCell';const {width, height} = Dimensions.get('window');export default class GDHalfHourHot extends Component {    constructor(props) {        super(props);        this.state = {            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),        };        this.fetchData = this.fetchData.bind(this);    }    fetchData() {        fetch('http://guangdiu.com/api/gethots.php')            .then((response) => response.json())            .then((responseData) => {                this.setState({                        dataSource: this.state.dataSource.cloneWithRows(responseData.data)                    }                );            }).done();    };    renderRow(rowData) {        return (            <Cell                image={rowData.image}                title={rowData.title}            />        );    };    componentDidMount() {        this.fetchData();    };    render() {        return (            <View style={styles.container}>                <ListView                    dataSource={this.state.dataSource}//加载数据                    renderRow={this.renderRow}                    showHorizontalScrollIndicator={false}                    style={styles.listviewStyle}/>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        alignItems: 'center',        backgroundColor: 'white',    },    listviewStyle: {        width: width    }});

阅读全文

0 0