RN初学者 使用ListView一直报错 求大神解救1111



  • 0_1491233948347_屏幕快照 2017-04-03 下午11.37.03.png

    • 以下是代码*
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      TabBarIOS,
      ListView,
      TouchableHighlight,
      Image,
      Dimensions
    } from 'react-native'
    var Icon = require('react-native-vector-icons/Ionicons')
    // export default {  
    //     width : Dimensions.get('window').width,  
    //     height: Dimensions.get('window').height,  
    // }
    // import width for 'Dimensions.get('window').width'
    var width = Dimensions.get('window').width
     class List extends Component {
      constructor(props) {
      super(props);
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.state = {
        dataSource: ds.cloneWithRows([{
            "_id":"820000200712217582","thumb":"http://dummyimage.com/1200x600/8ff10a)","video":"http://js.tudouui.com/bin/lingtong/PortalPlayer_198.swf"
        }
        ,
        {
            "_id":"620000199907016112","thumb":"http://dummyimage.com/1200x600/f857fc)","video":"http://js.tudouui.com/bin/lingtong/PortalPlayer_198.swf"
        }
        ,
        {
            "_id":"630000197110275355","thumb":"http://dummyimage.com/1200x600/56ec7a)","video":"http://js.tudouui.com/bin/lingtong/PortalPlayer_198.swf"
        }
        ,
        {
            "_id":"510000199306258233","thumb":"http://dummyimage.com/1200x600/7af52d)","video":"http://js.tudouui.com/bin/lingtong/PortalPlayer_198.swf"
        }]),
      }
          this._renderRow= this._renderRow.bind(this);
    }
      _renderRow(row) 
      {
        return(
          <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} />
                </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-chatbubble-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>
        );
      }
    }
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
      },
      header: {
        paddingTop: 25,
        paddingBottom: 12,
        backgroundColor: '#ee735c',
    
      },
      headerTitle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600',
        textAlign:'center'
      },
      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'
    
    
      },
      pay: {
          position:'absolute',
          bottom:14,
          right:14,
          width:46,
          height:46,
          paddingTop:9,
          paddingLeft:18,
          backgroundColor:'transparent',
          borderColor:'#fff',
          borderWidth:1,
          borderRadius:23,
          color:'#ed7b66'
    
      },
      handleText:{
        paddingLeft:12,
        fontSize:18,
        color:'#333'
      },
      up:{
        fontSize:22,
        color:'#333'
    
      },
      commentIcon:{
        fontSize:22,
        color:'#333'
      }
    
    });
    export default List
    


  • 不是大神。这个问题我遇到过,是因为你的代码里某一个rn的原生组件是不能用的,引起这个的原因可能是你用的rn版本低但是你看的文档是新版本的,找一下吧。



  • 我感觉是你的属性传的不正确,需要一个string类型的属性,你传了一个object类型的。排查一下吧。没细看代码...


登录后回复