React-native Flatlist 中的 renderItem 出错

Question

我正在尝试设置一个平面列表以在 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>
    );
  };
}

Answer 1

你必须使用renderItem={this.renderItem}

因为您的 renderItem 函数不是您的 render 函数的变量或内部函数。因此，当您尝试调用 class 的另一个函数时，您必须使用 this。

Answer 2

改变

renderItem={renderItem}

至

renderItem={this.renderItem}

React-native Flatlist 中的 renderItem 出错

Error with renderItem in React-native Flatlist

react-native

react-native-flatlist