ReferenceError：FlatListItemSeparator 未在 React Native 中定义

Posted 2023-02-16

【中文标题】ReferenceError：FlatListItemSeparator 未在 React Native 中定义

【英文标题】：ReferenceError: FlatListItemSeparator is not defined in React Native

【发布时间】：2021-08-07 10:36:58

【问题描述】：

我是 React Native 的新手，我正在学习在线教程。 这是我的App.js 文件：

import React,  useState, useEffect  from 'react';
import View,Text,ImageBackground,FlatList, Image, TouchableHighlight  from 'react-native';
import bookmarkIcon from './assets/bookmark.png';
import readIcon from './assets/read.png';
import styles from './styles';

const ArticleItem = (article) => 
  const  title, description, url, urlToImage  = article;
  return (
    <View style =  styles.articleContainer >
      <Image style= styles.articleImage  source= uri: urlToImage  />
      <Text style=  styles.articleTitle >
         title 
      </Text>
      <Text style =  styles.articleDescription >
         description 
      </Text>
      <View style =  styles.articleBtns>
        <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon =  readIcon  onPress =  () =>  console.log("Button pressed!")  title = "Open" />
        <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon =  bookmarkIcon  onPress =  () =>  console.log("Button pressed!")  title = "Read later" />
      </View>
    </View>
  )


FlatListItemSeparator = () => 
  return (
    <View
      style=
        height: 1,
        width: "100%",
        backgroundColor: "#000",
      
    />
  );


FlatListHeader = () => 
  return (
    <View elevation=1 
      style=
        height: 100,
        width: "97%",
        margin: 5,
        backgroundColor: "#fff",
        border: 2.9,
        borderColor: "black",
        alignSelf: "center",
        shadowColor: "#000",
        shadowOffset: 
          width: 0,
          height: 16,
        ,
        shadowOpacity: 1,
        shadowRadius: 7.49
      
    >
      <Text style=
          textShadowColor: 'black',
          textShadowOffset:  width: 1, height: 3 ,
          textShadowRadius: 10,
          fontSize: 40,
          fontWeight: '800',
          flex: 1,
          alignSelf: "center",
          paddingTop: 30
          
          >Latest articles</Text>
    </View>
  );


const IconButton = (title, color, bgcolor, onPress, width, icon ) =>
  return (
    <TouchableHighlight onPress =  onPress  style=   flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: bgcolor  >
    <View style= width: width, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'  >
      <Image style =   height: 27, width:27, margin : 5   source =   icon ></Image>
      <Text style =  color: color  >  title  </Text>      
    </View>
    </TouchableHighlight>
  );


const HomeScreen = (props) => 
  console.log("articles: ", props.articles);
  return (
    <View>
        <FlatList
          data= props.articles 
          ListHeaderComponent =  this.FlatListHeader    
          ItemSeparatorComponent =  this.FlatListItemSeparator
          keyExtractor=(item, index) => index.toString()
          renderItem=(item) => <ArticleItem article =  item   />
        />
    </View>
  );


const SplashScreen = (props) => 
  return (
    <View style =  styles.container  >
    <ImageBackground  style=  styles.backgroundImage  source=uri: 'http://i.imgur.com/IGlBYaC.jpg' >
            
      <View style=  styles.logoContainer >
        <Text style =  styles.logoText >
          Newzzz
        </Text>
        <Text style =  styles.logoDescription >
          Get your doze of daily news!
        </Text>
        
      </View>
      </ImageBackground>
    </View>
  );
 

const App = () => 
  const URL = 'https://raw.githubusercontent.com/nimramubashir/React-Native/fetch/articles.json';
  const [articles, setArticles] = useState([]);
  const [loading, setLoading ] = useState(true);
  useEffect(()=>
    fetch(URL)
    .then((response) => response.json())
    .then((responseJson) => 
      return responseJson.articles;
    )
    .then( articles  => 
      setArticles(articles);
      console.log(articles);
      setLoading(false);
    )
    .catch( error => 
      console.error(error);
    );
    
   , []);
  
  if (loading)
      return <SplashScreen />
     else 
      return <HomeScreen articles =  articles />
  
;

export default App

代码与教程相同，但是当我尝试运行此代码时，出现错误

ReferenceError: FlatListItemSeparator 未定义

我尝试导入FlatListItemSeparator，但由于它是只读的，我不能。我在 FlatListItemSeparator 和 FlatListHeader 都遇到了这个错误。为什么会出现此错误，我该如何解决？

【参考方案1】：

您将每个组件作为单独的功能组件。本教程可能基于 Class-Components。在 Function-Components 中没有 this，所以只需删除 this.

【讨论】：

该错误现在已从 FlatListHeader = () => 中删除，现在它显示在 FlatListHeader 的 `` ListHeaderComponent = FlatListHeader ItemSeparatorComponent = FlatListItemSeparator ``` 代替

但是你也删除了this. 吗？啊，如果你使用 = () => 表示法，你应该在函数之前放一个 const。