ReactNative中ListView的实现效果

来源：互联网发布：php mongodb remove 编辑：程序博客网时间：2024/05/18 09:05
这里写图片描述
ReactNative 中的简单的ListView 实现
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    ListView,    Image,    TouchableOpacity,    AlertIOS} from 'react-native';var wines = require('./Wine.json');var Dimensions = require('Dimensions');var {width} = Dimensions.get('window');var WineListView = React.createClass({    getInitialState(){        var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});        return{            dataSource:ds.cloneWithRows(wines),        }    },    render(){        return (            <ListView                dataSource = {this.state.dataSource}                renderRow = {this.renderRowView}                style={{marginTop: 26}                }            />        );    },//    返回每一个Item显示的内容    renderRowView(rowData,sectionId, rowId ,highlightRow){        return(            <TouchableOpacity                activeOpacity={0.6}                onPress={() => {AlertIOS.alert('点击和第' + rowId + '行')}}            >                <View style={styles.itemView}>                    <Image ref="itemIcon" source={{uri:rowData.image}} style={styles.itemIcon}/>                    <View style={styles.itemTextView}>                        <Text style={styles.itemTitle}>{rowData.name}</Text>                        <Text style={styles.itemMoney}>¥{rowData.money}</Text>                    </View>                </View>            </TouchableOpacity>        )    }})const styles = StyleSheet.create({    itemView:{        width:width,        paddingTop:8,        paddingBottom:8,        marginLeft: 16,        flexDirection:'row',        borderBottomWidth:0.5,        borderBottomColor:'#c3c3c3'    },    itemIcon:{        width:44,        height:44,        alignSelf:'center'    },    itemTextView:{        marginLeft:16,    },    itemTitle:{        fontSize:14,        width: width - 16 - 44 - 16 - 16    },    itemMoney:{        color:'red',        fontSize:16,        marginTop:8    }});module.exports = WineListView;
0 0