类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：在 react-native 中未定义

Question

使用包@material-ui/core

App.js

import React, { Component } from 'react'
import { StyleSheet, View } from 'react-native'
import { Colors } from 'react-native/Libraries/NewAppScreen'
import { NewsCardMaterial } from "./components/NewsCardMaterial"

function App() {
  return (
    <>
      <View>
        <NewsCardMaterial />
      </View>
    </>
  )
}

const Styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
})

export default App

NewsCardMaterial.js

import React, { Component } from "react"
import { makeStyles } from "@material-ui/core/styles"
import Card from "@material-ui/core/Card"
import CardHeader from "@material-ui/core/CardHeader"
import CardMedia from "@material-ui/core/CardMedia"
import CardContent from "@material-ui/core/CardContent"
import { red } from "@material-ui/core/colors"

const UseStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345
  },
  media: {
    height: 0,
    paddingTop: "56.25%" // 16:9
  },
  expand: {
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest
    })
  },
  expandOpen: {
    transform: "rotate(180deg)"
  },
  avatar: {
    backgroundColor: red[500]
  }
}))

const MyText = " This impressive paella is a perfect party dish and a fun meal to cook" +
  "together with your guests. Add 1 cup of frozen peas along with the" +
  "mussels, if you like."

export default function NewsCardMaterial() {
  const Classes = UseStyles()
  return (
    <div>
      <Card className={Classes.root}>
        <CardHeader
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016 | Orissa, India"
        />
        <CardMedia
          className={Classes.media}
          image={
            "https://image.freepik.com/free-photo/river-foggy-mountains-landscape_1204-511.jpg"
          }
          title="Paella dish"
        />
        <CardContent text={MyText} />
      </Card>

    </div>
  )
}

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

我看到以下错误 -

错误 1

错误 2

错误 3

到目前为止我做了什么 -

1. 在调用时重新检查导出组件的名称
2. 在导入时将 NewsCardMaterial 更改为 {NewsCardMaterial}
3. 安装了最新版本的 react、react-native 和 @material-ui/core
4. 包括在内和不包括在内
5. 删除了不必要的 cmets、空格并格式化了文档

我在这里创建了一个 sandbox，其中包含与卡相同的代码，但是，这里无法重现此错误 -

1. https://codesandbox.io/s/material-demo-forked-wji0s?file=/demo.js
2. https://codesandbox.io/s/material-ui-card-styling-example-forked-t7bu9?file=/src/index.js

Answer 1

Ciao，很遗憾，Material UI 不是 react-native 的库。您没有在codeandbox 中重现错误，因为codeandbox 是在react js 中制作的。对于 react-native，最接近 Material UI 的库是 react-native-material-ui。

编辑

例如，如果你想使用 react-native-material-ui Card 组件，安装库后：

npm install --save react-native-material-ui

只需要：

import { Card } from 'react-native-material-ui';
...
return(
    <View>
      <Card>
        // here card content
      </Card>
    </View>
)

结果是：

极简但高度可定制:)

Answer 2

在您的NewsCardMaterial.js 中，您正在默认导出

export default function NewsCardMaterial()

但是像这样导入它：

import { NewsCardMaterial } from "./components/NewsCardMaterial"

解决方案是像这样导入

import NewsCardMaterial from "./components/NewsCardMaterial"

或

像这样导出它：

export function NewsCardMaterial()