import React, { Component } from 'react';
import {
AppRegistry,
TabBarIOS,
FlatList
TouchableHighlight,
Image,
Dimensions,
StyleSheet,
Text,
View
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
const width = Dimensions.get('window').width
class ChatList extends Component{
constructor(props){
super(props)
this.state = {
data: [
{
"id":"230000201707307019",
"thumb":"http://dummyimage.com/600x300/058a9d)",
"video":"http://p.you.video.sina.com.cn/swf/opPlayer20180330_V5_1_1_63.swf?v=1523591005626"
},
{
"id":"150000200110173287",
"thumb":"http://dummyimage.com/600x300/3594ad)",
"video":"http://p.you.video.sina.com.cn/swf/opPlayer20180330_V5_1_1_63.swf?v=1523591005626"
}
],
}
}
_renderItem = (item, index) => {
return(
<TouchableHighlight>
<View style={styles.item}>
<Text style={styles.title}>{item.id}</Text>
<Image
source={{uri: item.thumb}}
style={styles.img}
>
<Icon
name='ios-play'
size={25}
style={styles.play}
/>
</Image>
<View style={styles.itemFooter}>
<View style={styles.itemFooterBox}>
<Icon
name='ios-heart-outline'
size={25}
style={styles.up}
/>
<Text style={styles.handlerText}>点赞</Text>
</View>
<View style={styles.itemFooterBox}>
<Icon
name='ios-chatboxes-outline'
size={25}
style={styles.comment}
/>
<Text style={styles.handlerComment}>评论</Text>
</View>
</View>
</View>
</TouchableHighlight>
)
}
_keyExtractor = (item, index) => index
render(){
return(
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Header</Text>
</View>
<FlatList
data={this.state.data}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
header: {
paddingTop: 25,
paddingBottom: 15,
backgroundColor: '#ee735c'
},
headerTitle: {
color: '#fff',
fontSize: 15,
fontWeight: '600',
textAlign: 'center'
},
item: {
width: width,
marginBottom: 10,
backgroundColor: '#fff'
},
title: {
padding: 10,
fontSize: 18,
color: '#333'
},
img: {
width: width,
height: width * 0.5,
resizeMode: 'cover'
},
play: {
position: 'absolute',
bottom: 14,
right: 14,
width: 46,
height: 46,
paddingTop: 9,
paddingLeft: 18,
backgroundColor: 'transparent',
borderColor: '#fff',
borderWidth: 1,
borderRadius: 23,
color: '#ed7b66'
},
itemFooter: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: '#eee'
},
itemFooterBox: {
padding: 10,
flexDirection: 'row',
width: width / 2 - 0.5,
justifyContent: 'center',
backgroundColor: '#fff'
},
handlerText: {
color: '#333',
paddingLeft: 12,
fontSize: 18
},
up: {
color: '#333',
fontSize: 22
},
handlerComment: {
color: '#333',
fontSize: 22
}
})
export default ChatList
哪里出错了,说是得到了一个 object, 本应该是 class/function
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.