React Native 中的元素类型无效

问题描述

我是本机反应的新手，我正在学习教程。这是我的 App.js 文件： App.js

import React,{ useState,useEffect,FlatList } from 'react';
import {View,Text,imagebackground,Button} from 'react-native';
import styles from './styles';

const ArticleItem = ({article}) => {
  const { description,url,urlToImage } = article;
  return (
    <View>
      <Image source={{ uri: urlToImage }} />
      <Text>
        { title }
      </Text>
      <Text>
        { description }
      </Text>
      <Button onPress = { () => { console.log("Button pressed!")} } title="Open" />
      <Button onPress = { () => { console.log("Button pressed!") } } title="Read later" />
    </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 HomeScreen = (props) => {
  console.log("articles: ",props.articles);
  return (
    <View>
        <FlatList
          data={ props.articles }
         // renderItem={({item}) => <ArticleItem article = { item }  />}
          keyExtractor={(item,index) => index.toString()}
          renderItem={({item}) => <ArticleItem article = { item }/>}
        />
    </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

虽然我认为导入/导出语句没有任何问题，但我得到以下信息。

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查 HomeScreen 的渲染方法。

在我更改 ArticleItem 组件并添加按钮后发生此错误。我正在导入 Button 组件。 HomeScreen 组件有问题吗？我不明白。

解决方法

您尚未导入在 FlatList 中呈现的 HomeScreen。