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 (
        <ListView
            dataSource ={this.state.dataSource}
            renderRow = {this.renderRow}
        />
    );
  },

  //返回具体的cell
  renderRow(rowData, sectionID, rowID, highlightRow){
    return(
    <TouchableOpacity activeOpacity={0.5} onPress={()=>{AlertIOS.alert('click'+rowID)}}>
        <View style={styles.cellViewStyle}>
            <Image source={{uri:rowData.image}} style={styles.leftImgStyle}/>

            <View style={styles.rightViewStyle}>
              <Text style={styles.topTitleStyle}>
                {rowData.name}
              </Text>
              <Text style={styles.bottomTitleStyle}>
                {rowData.money}
              </Text>
            </View>
        </View>
    </TouchableOpacity>
    );
  }

});

样式设置

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'
  }
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,638评论 25 708
  • 太长了,还是转载吧...今天在看博客的时候,无意中发现了@Trinea在GitHub上的一个项目Android开源...
    庞哈哈哈12138阅读 20,284评论 3 283
  • 远在尘俗外,好个清幽静。 遍地一场绿,草叶难分清。 园人三三俩,繁华不胜扰。 雨中孤游魂,只见我一人。
    锁子里阅读 414评论 0 0
  • 1. 油条这辈子确定的东西不多,但他用生命相信着的信念有如下几点:辛拉面是世界上最好吃的泡面,他一定会成为DOTA...
    挑食的吃货阅读 744评论 4 6