[新手求助]项目中使用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);
报错如下
有知道的能给个提示吗,万分感谢
-
render中只有flatlist一个组件却报undefined,那么只能怀疑你的rn版本低于0.43(flatlist在0.43版本才添加)
-
renderRow函数有误,应该是 renderRow = ({item})=>{...};
参数里有解构赋值操作,很容易忽略。再者,既然你这样定义renderRow,使用的时候就不用再使用尖头函数,renderItem = {this.renderRow} 即可
-
@晴明哦哦,真的是这样,谢谢了