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

[新手求助]项目中使用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
    有知道的能给个提示吗,万分感谢

    0

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

    0 1 条回复

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

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

    0

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

    0