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

Posted 2023-02-23

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

【英文标题】：type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined in react-native

【发布时间】：2020-12-17 14:01:29

【问题描述】：

使用包@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

到目前为止我做了什么 -

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

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

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

【参考方案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>
)

结果是：

极简但高度可定制:)

【讨论】：

我将尝试使用您提到的库创建卡片，但不确定它是否会无缝。无论如何，我之前使用的是npmjs.com/package/react-native-material-cards - 但是，这个包不是最常用或更新的！如果您对 react-native 中的卡片有任何其他建议，请告诉我！

Ciao @Mansi，我刚刚在我的答案中添加了一个卡片示例。也许能帮上忙。抱歉回复晚了:)

【参考方案2】：

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

export default function NewsCardMaterial()

但是像这样导入它：

import  NewsCardMaterial  from "./components/NewsCardMaterial"

解决方案是像这样导入

import NewsCardMaterial from "./components/NewsCardMaterial"

或

像这样导出它：

export function NewsCardMaterial()

【讨论】：

我尝试了这些步骤，现在有了您的回答，我什至尝试了导出函数 Component()，但我现在遇到了更多错误！错误：组件div 的视图配置getter 回调必须是一个函数（收到undefined）错误：文本字符串必须在 组件中呈现。

抱歉，我没有看到任何地方说 Material UI 支持 React Native。也许您想查看使用 Google 材料设计原则构建的 react-native-paper？