0

我是本机反应的新手，我正在学习教程。这是我的 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吗？我不明白。

4

1 回答 1

2

你还没有导入FlatList你渲染的HomeScreen。

于 2021-05-07T10:38:30.460 回答