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。