如何解决React-Native Flatlist中的renderItem错误
我正在尝试建立一个平面列表以在React-native的屏幕上对其进行测试。
启动模拟器时,出现以下错误:“ 找不到变量renderItem ”,但我真的不知道我的代码有什么问题。似乎我拥有所有要素。 有没有人可以帮助我?非常感谢您提供的任何解释或答案。
import React,{ Component } from "react";
import { Header } from "react-native-elements";
import {
FlatList,SafeAreaView,StatusBar,StyleSheet,Text,ImageBackground,View,ScrollView,Image,TouchableOpacity
} from "react-native";
import i18n from "../../src/i18n";
import styles from "../../assets/Styles/Styles";
const DATA = [
{
id: "bd7acbea-c1b1-46c2-aed5-1",title: "Test 1",},{
id: "3ac68afc-c605-48d3-a4f8-2",title: "Test 2",{
id: "58694a0f-3da1-471f-bd96-3",title: "Test 3",{
id: "58694a0f-3da1-471f-bd96-4",title: "Test 4",{
id: "58694a0f-3da1-471f-bd96-5",title: "Test 5",{
id: "58694a0f-3da1-471f-bd96-6",title: "Test 6",{
id: "58694a0f-3da1-471f-bd96-7",title: "Test 7",{
id: "58694a0f-3da1-471f-bd96-8",title: "Test 8",{
id: "58694a0f-3da1-471f-bd96-9",title: "Test 9",];
const Item = ({ item,onPress,style }) => (
<TouchableOpacity onPress={onPress} style={[styles.flightsListitem,style]}>
<Text style={styles.h3}>{item.title}</Text>
</TouchableOpacity>
);
export default class FlightsList extends Component {
constructor(props) {
super(props);
this.state = {
selectedId: '',setSelectedId:''
}
};
renderItem = ({ item }) => {
const backgroundColor = item.id === selectedId ? "transparent" : "fff";
return (
<Item
item={item}
onPress={() => setSelectedId(item.id)}
style={{ backgroundColor }}
/>
);
};
render() {
return (
<ImageBackground
source={require("../../assets/images/background.jpg")}
style={styles.backgroundImage}
>
<Header
backgroundImage={require("../../assets/images/bg-header.png")}
backgroundImageStyle={{
resizeMode: "stretch",}}
centerComponent={{
text: i18n.t("mytrips.title"),style: styles.headerComponentStyle,}}
containerStyle={[styles.headerContainerStyle,{ marginBottom: 0 }]}
statusBarProps={{ barStyle: "light-content" }}
/>
<ScrollView style={styles.containerScrollNoMargins}>
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
extraData={selectedId}
/>
<TouchableOpacity
style={styles.touchable2}
onPress={() => this.props.navigation.goBack()}
>
<View style={styles.view2}>
<Text style={styles.textimg2}>
{i18n.t("tripsform.action.back")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg2}
/>
</TouchableOpacity>
</SafeAreaView>
<Text>{"\n"}</Text>
</ScrollView>
</ImageBackground>
);
};
}
解决方法
更改
renderItem={renderItem}
到
renderItem={this.renderItem}
,
您必须使用renderItem={this.renderItem}
因为您的renderItem
函数不是render
函数的变量或内部函数。因此,在尝试调用类的另一个函数时,必须使用this
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。