Rn ListView实践

/**
 *  ListView
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity
} from 'react-native';

var Dimensions=require('Dimensions')



var datas=require('./1.json');

export default class ListViewDemo extends Component<{}> {


    constructor(props) {
        super(props)
        //1.设置数据源  固定写法
        var ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2})
        //2.设置返回的数据  固定写法
        this.state={
            dataSource:ds.cloneWithRows(datas)
        }
    }


    render() {
        return (
            <View style={styles.container}>
                  <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}>
                </ListView>
            </View>
        );
    }
    
    //设置每行的item 
    renderRow(rowData,sectionID,rowID,highlightRow){
        return(
            <TouchableOpacity activeOpacity={0.6} onPress={()=>{
                alert('点击了第'+rowID+"行")
            }}>
                <View style={styles.rowViewStyle}>
                    {/*左边的Image*/}
                    <Image source={{uri:rowData.instrument}} style={styles.leftViewStyle}/>
                    {/*右边的View*/}
                    <View style={styles.rightViewStyle}>
                        <Text style={styles.topTextStyle}>
                            {rowData.firstName}
                        </Text>
                        <Text style={styles.bottomTextStyle}>
                            {rowData.money}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

}





const styles=StyleSheet.create({
    container:{
        flex:1, //设置全为1说明它占一份,
        backgroundColor:'white'
    },
    rowViewStyle:{
        //整个View的布局
        flexDirection:'row',
        marginTop:10,
        backgroundColor:'white',
        alignItems:'center',
        borderBottomWidth:0.5,
        borderColor:'#e8e8e8',
        padding:10
    },
    leftViewStyle:{
        width:70,
        height:70
    },
    rightViewStyle:{
      marginLeft:10,
      justifyContent:'center'
    },
    topTextStyle:{
        color:'red',
        fontSize:18
    },
    bottomTextStyle:{
        marginTop:10,
        color:'green'
    }
})