使用react-native做一个简单的应用-06商品界面的实现
商品界面实现起来很简单,其实就是一个listview的使用:
关于listview的使用,在官方文档里面已经介绍的很详细了。在这里我要提一个坑。
listview在Android和iOS中的效果是不一样的,listview对iOS的支持已经很好了,但是对android很多属性都不支持。有些地方官方文档也说的模棱两可的,因此如果想做炫酷的上、下拉效果的话,建议做iOS。
下面看一下代码吧:
'use strict' var React = require('react-native')
import Icon from 'react-native-vector-icons/FontAwesome'
import AniImage from '../components/AniImage'
import AniRoll from '../components/AniRoll'
var {
Image,
ListView,
StyleSheet,
Text,
View,
TouchableOpacity,
Navigator,
PropTypes
} = React var REQUEST_URL = 'http://192.168.6.5:8888/getCommidity' class Commodity extends React.Component {
static propTypes = {
navigator: PropTypes.object,
fetch: PropTypes.func
};
constructor (props) {
super(props)
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
loaded: false
}
}
componentDidMount () {
this.fetchData()
} fetchData () {
fetch (REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),
loaded: true
})
})
.done()
} render () {
if (!this.state.loaded) {
return this.renderLoadingView()
} return (
<ListView
initialListSize={3}
dataSource={this.state.dataSource}
renderRow={this.renderCommidity.bind(this)}
style={styles.listView}/>
)
} renderLoadingView () {
return (
<View style={styles.txtContainer}>
<AniRoll inputRange={[0, 1]} outputRange={['0deg', '10000deg']} style={{width: 50, height: 50}} />
<Text>
正在加载图文。。。
</Text>
</View>
)
} renderCommidity (commidities) {
return (
<View style={styles.container} >
<Image style={styles.viewTopImage} source={require('../assets/listbg.png')}>
<TouchableOpacity onPress={this.toCommodityScreen.bind(this, commidities)}>
<AniImage
type={'image'}
inputRange={[0, 100]}
outputRange={[0, 1]}
style={styles.aniImage}
url={'http://192.168.6.5:8888/getImage?imgName=' + commidities.imgPath1} />
</TouchableOpacity>
</Image>
<View style={styles.viewTxtContent}>
<TouchableOpacity>
<Text style={styles.txtContent}>{commidities.title}</Text>
</TouchableOpacity>
</View>
<View style={styles.viewBottom}>
<View style={styles.viewBottomLeft}>
<Icon name='heart-o' size={20} />
<Text style={styles.txtContent} >{commidities.love}</Text>
</View>
<View style={styles.viewBottomRight}>
<View style={styles.viewBottomRightContainer}>
<Icon name='clock-o' size={20} />
<Text style={styles.txtContent} >{commidities.date}</Text>
</View>
</View>
</View>
<Image source={require('../assets/splite.png')} style={styles.imageSplit}/>
</View>
)
} toCommodityScreen (commidities) {
var commodity = commidities
let navigator = this.props.navigator
navigator.push({id: 'CommodityScreen', sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump, passProp: {commodity}})
}
} var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#ffffff'
},
txtContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fffff'
},
aniImage: {
height: 330,
width: null
},
viewTopImage: {
height: 330,
width: null,
margin: 10
},
txtContent: {
fontSize: 16,
marginLeft: 5
},
viewTxtContent: {
marginLeft: 10,
marginRight: 10,
marginBottom: 5,
flex: 1
},
txtBottom: {
flex: 1,
fontSize: 12
},
viewBottom: {
marginLeft: 10,
marginRight: 10,
marginBottom: 5,
flex: 1,
flexDirection: 'row'
},
imageSplit: {
flex: 0.3,
backgroundColor: '#F0F0F0'
},
numberText: {
fontSize: 15,
marginLeft: 20
},
viewBottomLeft: {
flex: 1,
flexDirection: 'row'
},
viewBottomRight: {
flex: 1,
alignItems: 'flex-end'
},
viewBottomRightContainer: {
flex: 1,
flexDirection: 'row'
}
}) module.exports = Commodity
一、构造方法:
constructor (props) {
super(props)
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
loaded: false
}
}
dataSource就是listview的数据源,loaded则是判断数据是否加载完毕。
二、fetchData方法
获取listview的接口数据,数据请求完成之后,重新渲染界面将loaded设置为true
三、toCommodityScreen方法
进入商品的详情界面。
使用react-native做一个简单的应用-06商品界面的实现的更多相关文章
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- React Native ——实现一个简单的抓取github上的项目数据列表
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...
- 使用react-native做一个简单的应用-04界面主框架
欢迎界面搭建完毕,我们接下来需要做的就是搭建应用程序的主体框架啦.首先我们看一下首页的截图: 从图中看到,我将首页分为了三部分:用黑色矩形表示的头部,绿色表示的内容和红色表示的底部. 下面我们需要解决 ...
- 用react native 做的一个推酷client
用react native 做的一个推酷client 仅供大家參考.仅仅为抛砖引玉.希望大家能以此来了解react.并编写出很多其它的优质的开源库,为程序猿做出贡献. 用的的组件: Navigator ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 一起用HTML5 canvas做一个简单又骚气的粒子引擎
前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...
- Jmeter初步使用二--使用jmeter做一个简单的性能测试
经过上一次的初步使用,我们懂得了Jmeter的安装与初步使用的方法.现在,我们使用Jmeter做一个简单的性能测试.该次测试,提交的参数不做参数化处理,Jmeter各元件使用将在介绍在下一博文开始介绍 ...
随机推荐
- 1、solr 查询
solr查询参数: q 查询的关键字,此参数最为重要,例如,q=id:1,默认为q=*:*, fl 指定返回哪些字段,用逗号或空格分隔,注意:字段区分大小写,例如,fl= id,title,sor ...
- 宏定义中使用do{}while(0)的好处 (转载)
宏定义中使用do{}while(0)的好处 #define MACRO_NAME(para) do{macro content}while(0) 的格式,总结了以下几个原因: 1,空的宏定 ...
- Android开源框架之SwipeListView导入及模拟QQ侧滑
SwipeListView是Github上的一个开源框架,地址:https://github.com/47deg/android-swipelistview SwipeListView was bor ...
- AFNetworking 使用方法(2.0)
AFNetworking 使用方法(2.0) 分类: IOS2014-11-12 09:17 2018人阅读 评论(0) 收藏 举报 目录(?)[+] 本文介绍的是AFNetworking-2 ...
- VC6-Win7下VC++6.0打开多个工程的设置
在Win7操作系统下,如果是以Administrator登陆,则VC6.0打开工程文件的时候,不能同时打开多个工程文件,后打开的工程会将前一个工程close掉,这样,VC6.0只能出现一个进程.在xp ...
- HTML5实战之桌面通知
桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户.这和WebIM是最为天然的结合.不过,目前支持Desktop Notification功能的浏览器只有Chrome5+. 关于通知的基础知 ...
- 一种针对虚拟机的应用软件License认证方法
由于虚拟机的硬件信息可以随意修改,使得虚拟机可能具有相同的硬件信息,在传统的应用软件License认证方式中会导致License认证漏洞.本专利提供了一种有效的解决方法. 文/王宏财 目 前,云计算的 ...
- Codeforces 494D Upgrading Array
http://codeforces.com/contest/494/problem/D 题意:给一个数组,和一个坏质数集合,可以无数次地让1到i这些所有数字除以他们的gcd,然后要求Σf(a[i])的 ...
- js收集错误信息,错误上报
线上的代码可有有时候用户会反应不好使,一般是因为js造成的! 尤其在移动端各个手机之前的差异特别大. 下面这段代码是获取能帮助你! <script> window.onerror = fu ...
- error Infos