StaticRenderer.render(): A valid React element (or null) must be returned.
来源:6-2 视频列表页挖坑开发(2)
惟独爱衣
2017-09-26
StaticRenderer.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TabBarIOS,
Text,
View,
ListView,
TouchableHighlight,
Image,
Dimensions,
} from 'react-native';
var width = Dimensions.get('window').width
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsA';
var List = React.createClass({
getInitialState(props) {
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
return {
dataSource: ds.cloneWithRows([
{
"key":"1","_id":"130000198909236337","thumb":"http://dummyimage.com/1200X600/6f9768)","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}
,
{
"key":"2","_id":"510000199207236389","thumb":"http://dummyimage.com/1200X600/094f1a)","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}
]),
};
},
renderRow(row) {
<TouchableHighlight>
<View style={styles.item}>
<Text style={styles.title}>{row._id}</Text>
<Image
source={{uri:row.thumb}}
style={styles.thumb}
>
{/*<Icon
name="ios-play"
size={28}
style={styles.play}
/>*/}
<Text style={styles.playText}></Text>
</Image>
<View style={styles.itemFooter}>
<View style={styles.handleBox}>
{/*<Icon
name="ios-heart-outline"
size={28}
style={styles.up}
/>*/}
<Text style={styles.handleText}>喜欢</Text>
</View>
<View style={styles.handleBox}>
{/*<Icon
name="ios-chatboxes-outline"
size={28}
style={styles.commentIcon}
/>*/}
<Text style={styles.handleText}>评论</Text>
</View>
</View>
</View>
</TouchableHighlight>
},
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>列表</Text>
</View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
enableEmptySections={true}
/>
</View>
)
}
})
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
header: {
paddingTop: 20,
paddingBottom: 12,
backgroundColor: '#ee735c'
},
headerTitle: {
color: '#fff',
fontSize: 16,
textAlign: 'center',
fontWeight: '600'
},
item: {
width: width,
marginBottom: 10,
backgroundColor: '#fff'
},
thumb: {
width: width,
height: width * 0.5,
resizeMode: 'cover'
},
title: {
padding: 10,
fontSize: 18,
color: '#333'
},
itemFooter: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: '#eee'
},
handleBox: {
padding: 10,
flexDirection: 'row',
width: width / 2 - 0.5,
justifyContent: 'center',
backgroundColor: '#fff'
},
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'
},
playText: {
position: 'absolute',
bottom: 5,
right: 5,
fontSize: 20,
color: '#ed7b66'
},
handleText: {
paddingLeft: 12,
fontSize: 18,
color: '#333'
},
up: {
fontSize: 22,
color: '#333'
},
commentIcon: {
fontSize: 22,
color: '#333'
}
})
module.exports = List
4回答
-
惟独爱衣
提问者
2017-09-27
找官方实例改了一波,开挂中
getInitialState() {
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
return {
dataUrl: [{
"_id":"110000201212297317","thumb":"https://dummyimage.com/1280X720/f04a66)","title":"测试内容la03","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}
,
{
"_id":"650000200710098186","thumb":"https://dummyimage.com/1280X720/07114f)","title":"测试内容la03","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}
,
{
"_id":"410000199603201758","thumb":"https://dummyimage.com/1280X720/14027f)","title":"测试内容la03","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}
,
{
"_id":"650000200111117330","thumb":"https://dummyimage.com/1280X720/e07841)","title":"测试内容la03","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}
,
{
"_id":"500000200002049858","thumb":"https://dummyimage.com/1280X720/1da25f)","title":"测试内容la03","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}
,
{
"_id":"130000201410136550","thumb":"https://dummyimage.com/1280X720/aef335)","title":"测试内容la03","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}
,
{
"_id":"340000200608274937","thumb":"https://dummyimage.com/1280X720/66c373)","title":"测试内容la03","video":"http://www.imooc.com/4e7e33fe-53d1-45f5-942e-b9d42e98dc36"
}],
dataSource: ds.cloneWithRows(['row1', 'row2', 'row3', 'row4', 'row5', 'row6', 'row7']),
};
},
renderRow(rowData: string,sectionID: number, rowID: number) {
var row = this.state.dataUrl[rowID];
10 -
Scott
2017-10-03
用 class extend Component 的写法(ES6)的写法来重构下这个页面走一遍试试,课程补录中应该有介绍如何把 createClass 切换成 Component
00 -
惟独爱衣
提问者
2017-09-26
把外面的[]号去掉以后就全空白了,ListView部分完全没有调用的赶脚
00 -
惟独爱衣
提问者
2017-09-26
调试后发现,错误就在return的dataSource里面,里面的数组对象格式有错,但是我现在还没调好
00
相似问题