React Native 基础篇 之 ListView 产品列表实现
2017-04-12 11:11
513 查看
1.为了测试用的是本地图片,首先图片资源集成到项目中。
这里是android适配的项目 将图片资源放置在下面 通过json 方式访问
项目名称\android\app\src\main\res\drawable
文件 NewWine.json
代码链接:http://pan.baidu.com/s/1o7NBJF8 密码:1l9y
这里是android适配的项目 将图片资源放置在下面 通过json 方式访问
项目名称\android\app\src\main\res\drawable
文件 NewWine.json
{ "data":[ { "image": "gujing", "money": "102", "name": "古井贡酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "jiangxiaobai", "money": "103", "name": "江小白酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "jigongshan", "money": "104", "name": "鸡公山酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "jiumenkou", "money": "105", "name": "九门口酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "langjiu", "money": "106", "name": "郎酒酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "maotai", "money": "107", "name": "茅台酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "shede", "money": "108", "name": "舍得历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "tianzhilan", "money": "109", "name": "天之蓝历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "xifeng", "money": "110", "name": "西风酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "xijiu", "money": "111", "name": "习酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "zhanggong", "money": "112", "name": "张弓酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" }, { "image": "zhangyu", "money": "113", "name": "张裕历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村" } ] }2.listViewDemo.js 界面 主意红色部分 如果不用初始化指定 会报错,应该是this对象改变了在回调方法里
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TouchableOpacity, ListView, Image, Text, View } from 'react-native'; import BadgeData from "./BadgeData.json"; import NewWine from "./NewWine.json"; let Dimensions = require("Dimensions"); let {width} = Dimensions.get('window'); export default class listViewDemo extends Component { constructor(props){ super(props); //1.设置数据源 let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); //2.设置返回数据 // this.state = {dataSource:ds.cloneWithRows(Wine.data)}; this.state = {dataSource:ds.cloneWithRows(NewWine.data)}; thiz = this; } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} /> ); } _onItemPress(e){ let num = 0; if(Number.isFinite(e)==false){ num = Number.parseInt(e)+1; }else{ num = e+1; } console.log(">>>点击第 "+num+" 行"); } _renderRow(rowData, sectionID, rowID, highlightRow){ return( <TouchableOpacity activeOpacity={0.5} onPress={()=>{thiz._onItemPress(rowID)}}> <View style={styles.cellViewStyle}> <Image source={{uri: rowData.image}} style={styles.leftImageStyle} /> <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', }, leftImageStyle:{ marginRight:15, width:60, height:60 }, rightViewStyle:{ justifyContent:"center", width:width*0.8, }, topTitleStyle:{ color:"red", fontSize:20, }, bottomTitleStyle:{ color:"blue", fontSize:20, } });
代码链接:http://pan.baidu.com/s/1o7NBJF8 密码:1l9y
相关文章推荐
- React Native基于mobx 实现 listview列表默认选中,选中,取消选中
- android 实现listview动态加载列表项
- ExpandableListView 功能界面布局探究之三(没有child的下拉列表,group不展开的实现)
- 实例教程八:采用ListView实现数据列表显示
- Android学习笔记---19_采用ListView实现数据列表显示,以及各种适配器使用,和如何写自己的适配器
- 在android里用ExpandableListView实现二层和三层列表源码
- ListView控件演示06:如何实现用户同时选择多个列表项
- 实例教程八:采用ListView实现数据列表显示
- Android采用ListView实现数据列表显示
- android 实现listview动态加载列表项
- android 实现listview动态加载列表项
- android 实现listview动态加载列表项
- Android采用ListView实现数据列表显示
- GridView/ListView + ObjectDataSource + Entity 实现Webform列表真分页
- 实现单击列表头对ListView的动态排序
- Android 四种ListView(列表)的实现过程详解
- android 实现listview动态加载列表项
- Project——SQLite数据库操作(采用ListView实现数据列表展现)
- 在android里用ExpandableListView实现二层和三层列表源码
- Android开发入门之采用ListView实现数据列表显示