#javascript #react-native
Вопрос:
ошибка
Ошибка: Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт.
Проверьте метод рендеринга 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;
Комментарии:
1. не могли бы вы, пожалуйста, показать
User
код?2. Отредактировано выше!
3. Какую версию
native-base
вы используете?4. Исходная база: 3.1.0
5. Проверьте мой ответ ниже.
Ответ №1:
попробуйте экспортировать так
export default function User () {
// ... code goes here
}
вы также можете использовать анонимную функцию при экспорте по умолчанию
Ответ №2:
Похоже, вы установили native-base
v3 и импортируете native-base
компоненты v2 ( Card
, CardItem
, H1
) и т. Д. Вам придется импортировать правильные компоненты и переписать свой User
компонент.
Компоненты Card
, CardItem
которых там нет, v3
и могут быть легко построены с использованием таких компонентов, как Box
. H1
Компонент также заменяется компонентом Heading
.
Комментарии:
1. Теперь я получаю журнал, как показано ниже: ЖУРНАЛ [Ошибка: useTheme:
theme
не определен. Похоже, вы забыли завернуть свое приложение в<NativeBaseProvider />
]2. Вам придется обернуть все свое приложение
NativeBaseProvider
. docs.nativebase.io/setup-provider3. Нужно ли мне также завернуть его в пользовательский компонент?
4. Нет. Оберните его на корневом уровне, как предложено в документе
5. ЖУРНАЛ [Инвариантное нарушение: обязательный компонент: «RNCSafeAreaProvider» не найден в UIManager.] Нарушение инварианта ОШИБКИ: Компонент requireNativeComponent: «RNCSafeAreaProvider» не найден в UIManager. Я сделал, как сказал док, и теперь я сталкиваюсь с этим