[新手求助]项目中使用FlatList报错



  • 代码如下

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      FlatList,
      Image,
    } from 'react-native';
    
    var flatListData = [{
            key: 'a',
            text: '444'
        },{
            key: 'b',
            text: '333'
        },{
            key: 'c',
            text: '2222'
        },{
            key: 'd',
            text: '111'
        }];
    
        //获取屏幕的宽和高
    //使用Dimensions
    var Dimensions = require('Dimensions');
    var {screenWidth,screenHeight} = Dimensions.get('window');
    
    export default class Lemon extends Component {
    
        constructor(props){
            super(props);
        }
    
      render() {
        return (
      // <View style={styles.container}>
      // </View>
          <FlatList
                    ref='FlatList'
                    style={styles.container}
                    data={flatListData} //数据源
                    renderItem = {(item) => this.renderRow(item)} //每一行render
                    ItemSeparatorComponent = {()=>{return(<View style={{height:1,backgroundColor:'cyan'}}/>)}} //分隔线
          />
          
        );
      }
      
    //
        renderRow =(item) =>{
            return(
                <TouchableOpacity onPress={()=>this.cellAction(item)}>
                <View style={{flex: 1,flexDirection:'row'}}>
                  <View style={{flex: 1}}>
                    <Text style={styles.txt}>{item.item.key}</Text>
                    <Image source={{uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={styles.imageStyle}></Image>
                 </View>
    
                  <View style={{flex: 1,backgroundColor: 'white'}}>
                    <Text style={styles.txt}>{item.item.key}</Text>
                    <Text style={styles.txt}>To get starteds</Text>
                    <Text style={styles.txt}>{item.item.text}</Text>
                 </View> 
                </View>
                // <Text style={styles.text}>这是收藏页面</Text>
                </TouchableOpacity>
             )
         }
    //
    
         cellAction(item) {
            alert(item.item.key)
            
        }
        
    }
    
    const styles = StyleSheet.create({
      // container: {
      //   flex:1,
      //   backgroundColor: 'cyan',
      //   justifyContent: 'center',
      //   alignItems: 'center'
      // },
      text: {
        fontSize: 20,
        color: 'red'
      },
    
      container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
      },
      txt: {
          textAlign: 'center',
          textAlignVertical: 'center',
          color: 'red',
          fontSize: 30,
          // width:50,
          // height:40,
          flex: 1,
      },
      imageStyle: {
        flex: 1,
        // width: 30,
        // height: 40,
      },
    });
    AppRegistry.registerComponent('Test', () => Lemon);
    

    报错如下

    0_1548745915701_WechatIMG4.jpeg
    有知道的能给个提示吗,万分感谢



  • render中只有flatlist一个组件却报undefined,那么只能怀疑你的rn版本低于0.43(flatlist在0.43版本才添加)



  • renderRow函数有误,应该是 renderRow = ({item})=>{...};
    参数里有解构赋值操作,很容易忽略。

    再者,既然你这样定义renderRow,使用的时候就不用再使用尖头函数,renderItem = {this.renderRow} 即可



  • @晴明哦哦,真的是这样,谢谢了


Log in to reply