React-Native 渲染组件的问题

Question

错误

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

检查User的渲染方法。

import User from './Components/User';

---

return(
  <View style={styles.container}>
    <View>
      <User details={details} />
    </View>
  </View>
)

---

用户组件

import React from 'react';
import {Image, Text, StyleSheet} from 'react-native'
import {
  Card,
  CardItem,
  H1,
} from 'native-base'
import moment from 'moment'

const User = ({details}) => {
    return(
        <Card style={styles.card}>
          <CardItem cardBody style={styles.cardItem}>
            <Image
            source={{
              uri: details.picture?.large,
              width: 150,
              height: 250
            }}
            style={styles.image}
            />
          </CardItem>

          <CardItem style={styles.cardItem}>
            <H1 style={styles.text}>
              {details.name?.title} {details.name?.first} {details.name?.last}
            </H1>
          </CardItem>

          <CardItem bordered style={styles.cardItem}>
            <Text style={styles.text}>
              {details.cell}
            </Text>
          </CardItem>

          <CardItem footer style={styles.cardItem}>
            <Text style={{color: '#fff'}}>
              Registered at 
              {moment(details.registered?.text).format('DD-MM-YY')}
            </Text>
          </CardItem>

        </Card>
    )
}

export default User;

Answer 1

尝试像这样导出

export default function User () {
// ... code goes here
}

您也可以在默认导出中使用匿名函数

Answer 2

您似乎已经安装了native-base v3 并导入了native-base v2 组件（Card、CardItem、H1）等。您必须导入正确的组件并重写您的User 组件。

Card、CardItem 组件在 v3 中不存在，可以使用 Box 等组件轻松构建。 H1 组件也被替换为 Heading 组件。

https://docs.nativebase.io/migration/card