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 (
                
                    
                    
                 
            );
          },

            renderRow(rowData,sectionID,rowID,highlightRow){

                return(
                    AlertIOS.alert('点击了第'+rowID+'行')}>
                    
                        
                        
                            {rowData.des}
                            {rowData.name}
                        

                    
                    
                )
            },
    }
);


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+'行')的写法，如果没有()=>会有调用问题，具体原因以后会研究吧
思考：标题超出屏幕解决办法