0

我是 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 都遇到了这个错误。为什么我会收到此错误，我该如何解决？

4

1 回答 1

1

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

于 2021-05-18T07:56:35.660 回答