react-native ListView数据源Json展示

效果图

demo.png

附上代码：https://github.com/wanwang88/ReactNativeListView1Demo

//导入json
var Wine = require('./Wine.json');
//获取屏幕width
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

数据源读取

//ES5
var AListViewDemo = React.createClass({
  //设置初始值
  getInitialState(){
    //设置数据源
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 != r2});

    //返回数据
    return{
      dataSource:ds.cloneWithRows(Wine),
    };
  },

  //设置render
  render(){
    return (
        
    );
  },

  //返回具体的cell
  renderRow(rowData, sectionID, rowID, highlightRow){
    return(
    {AlertIOS.alert('click'+rowID)}}>
        
            

            
              
                {rowData.name}
              
              
                {rowData.money}
              
            
        
    
    );
  }

});

样式设置

const styles = StyleSheet.create({
  cellViewStyle:{
    padding:10,
    backgroundColor:'white',
    borderBottomWidth:0.5,
    borderBottomColor:'#e8e8e8',

    //主轴方向
    flexDirection:'row',
  },
  rightViewStyle:{
    //主轴对齐方式
    justifyContent:'center'

  },
  leftImgStyle:{
    width:60,
    height:60,
    marginRight:15
  },
  topTitleStyle:{
    fontSize:15,
    width:width-90,
    marginBottom:10
  },
  bottomTitleStyle:{
    color:'blue'
  }
});