ReactNative→ListView

ListView相关属性

运行结果

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    ListView,
    TouchableOpacity,
    AlertIOS

} from 'react-native';

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

        var Dimensions = require('Dimensions');
        var {width} = Dimensions.get('window');

        var  helloworld = React.createClass({
            getInitialState(){
            var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 != r2});
             return{
                 dataSource : ds.cloneWithRows(datas.data)
             }
            },

          render() {
              return (
                <View style={styles.container}>
                    <ListView
                        dataSource={this.state.dataSource}
                        renderRow={this.renderRow}
                    >
                    </ListView>
                 </View>
            );
          },

            renderRow(rowData,sectionID,rowID,highlightRow){

                return(
                    <TouchableOpacity activeOpacity={0.5} onPress={()=>AlertIOS.alert('点击了第'+rowID+'行')}>
                    <View style={styles.cellStyle}>
                        <Image source={{uri:rowData.ad}} style={styles.imageStyle}/>
                        <View>
                            <Text  style={styles.titleStyle}>{rowData.des}</Text>
                            <Text>{rowData.name}</Text>
                        </View>

                    </View>
                    </TouchableOpacity>
                )
            },
    }
);


const styles = StyleSheet.create({
      container: {
          marginTop:25,
          flex:1
      },
    cellStyle:{

      borderColor:'#eeeeee',
        borderWidth:1,
        flexDirection:'row',
        padding:10
    },
    imageStyle:{
        width:60,
        height:60,
        marginRight:10
    },
    titleStyle:{
        width:width*0.7,
        color:'red',
        fontSize:15,
        marginBottom:10
    }

});

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

这里注意onPress={()=>AlertIOS.alert('点击了第'+rowID+'行')的写法，如果没有()=>会有调用问题，具体原因以后会研究吧
思考：标题超出屏幕解决办法