Javascript 我的React本机应用存在导入/导出问题

我正在使用Android Studio和Visual Studio代码开发React原生Instagram克隆应用程序。在模拟器中运行应用程序时，我在Android Studio中收到一个错误。这是我的logcat错误：

Android Studio中的logcat错误：

2020-06-10 15:30:32.881 11122-11329/com.instaclone E/ReactNativeJS:错误：元素类型无效：需要字符串（用于内置组件）或类/函数（用于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

Check the render method of `PostFeed`.

This error is located at:
    in PostFeed (at InstaClone.js:27)
    in RCTView (at InstaClone.js:21)
    in InstaClone (at App.js:7)
    in App (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

它没有从PostFeed.js文件接收我的数据。我在PostFeed.js文件中导出了它，并在InstaClone.js文件中导入了它，其中logcat指向错误。以下是我的InstaClone.js代码：

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  Dimensions,
  TouchableOpacity
} from "react-native";
import config from "./config";

import { PostFeed } from './components/container';
import { Post } from "./components/presentation";

class InstaClone extends Component {

  render() {

    return (
      <View style={{ flex: 1, width: 100 + '%', height: 100 + '%' }}>
        <View style={styles.tempNav}>
          <Text>Instagram</Text>

        </View>

        <PostFeed />

      </View>

    );
  }
}
const styles = StyleSheet.create({
  tempNav: {
    width: 100 + '%',
    height: 56,
    marginTop: 20,
    backgroundColor: 'rgb(250,250,250)',
    borderBottomColor: "rgb(233,233,233)",
    borderBottomWidth: StyleSheet.hairlineWidth,
    justifyContent: "center",
    alignItems: "center"
  }

});


export default InstaClone;

import React，{Component}来自“React”；
进口{
看法
文本，
样式表，
形象,，
尺寸，
可触摸不透明度
}从“反应本族语”；
从“/config”导入配置；
从“./components/container”导入{PostFeed}；
从“/components/presentation”导入{Post}”；
类InstaClone扩展了组件{
render（）{
返回(
一款图片分享应用
);
}
}
const styles=StyleSheet.create({
临时导航：{
宽度：100+“%”，
身高：56，
玛金托普：20，
背景颜色：“rgb（250250）”，
borderBottomColor:“rgb（233）”，
borderBottomWidth:StyleSheet.hairlineWidth，
辩护内容：“中心”，
对齐项目：“中心”
}
});
导出默认InstaClone；

PostFeed.js代码：

import React, { Component } from 'react';
import { Flatlist } from 'react-native';
import { Post } from '../presentation';


class PostFeed extends Component {

  _renderPost({ item }) {
    return <Post item={item} />;
  }

  _returnKey(item) {
    return item.toString();
  }

  render() {

    return (
      <Flatlist
        data={[
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20
        ]}
        keyExtractor={this._returnKey}
        renderItem={this._renderPost}
      />
    );
  }
}

export default PostFeed;

import React，{Component}来自'React'；
从“react native”导入{Flatlist}；
从“../presentation”导入{Post}；
类PostFeed扩展组件{
_renderPost（{item}）{
返回；
}
_返回键（项目）{
return item.toString（）；
}
render（）{
返回(
);
}
}
导出默认的PostFeed；

您的导入语法与导出语法不匹配。您正在将PostFeed导出为默认值，但尝试将其作为命名导入

默认值：

export default PostFeed;

// must use with:

import PostFeed from './components/container';

命名：

export PostFeed;

// must use with:

import {PostFeed} from './components/container';

您只需要选择其中一个，并在导出和导入类时一致地使用它

---

我想指出的是，你自己在评论中发布的错误消息基本上就是这样说的，但我承认这并不清楚

问题不在instaclone中，而是在PostFeed中。你能发布吗？我刚刚用codePostFeed更新了我的原始帖子，但是没有导出。类定义行应该是导出类PostFeed扩展组件{我刚刚尝试过。它有完全相同的错误：忘记从定义它的文件中导出组件，或者您可能混淆了默认组件和名为imports的组件。是的，这有点混乱。感谢您澄清这一点。我将检查我的代码并选择一致的导入导出语法。如果它有效或无效，我将发布我决定取消此pr重新开始。我相信我的家乡环境是有问题的。这里收到的所有建议都是正确的，所以谢谢你所做的一切。