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.

http://szimg.mukewang.com/59ca6da30001c73828061304.jpg

http://szimg.mukewang.com/59ca6da40001494225201182.jpg

/**

 * 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];

//szimg.mukewang.com/59cbb5e70001e5ce27381264.jpg

1
0

Scott

2017-10-03

用 class extend Component 的写法(ES6)的写法来重构下这个页面走一遍试试,课程补录中应该有介绍如何把 createClass 切换成 Component

0
0

惟独爱衣

提问者

2017-09-26

//szimg.mukewang.com/59ca776200011dd723680746.jpg把外面的[]号去掉以后就全空白了,ListView部分完全没有调用的赶脚

0
0

惟独爱衣

提问者

2017-09-26

//szimg.mukewang.com/59ca731100014ee610420596.jpg调试后发现,错误就在return的dataSource里面,里面的数组对象格式有错,但是我现在还没调好

0
0

贯穿全栈React Native开发App

全面掌握React Native技术,不止步前端开发,让你移动领域大放光彩

946 学习 · 385 问题

查看课程