Я работал над этой программой, и недавно я попытался использовать некоторые новые компоненты из собственной библиотеки реакции, такие как Icon
и Header
, но всякий раз, когда я пытаюсь использовать их в функции рендеринга, я получаю ошибку:
«Инвариантное нарушение: инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен. , или вы могли перепутать импорт по умолчанию и именованный импорт ".
Для меня это действительно странно, потому что я использовал и использую такие компоненты, как Image
, Text
и View
, без проблем, поэтому я не понимаю, почему у меня сейчас возникнут проблемы с этими новыми компонентами. Я не уверен, что я изменил в своей программе, чтобы произошло что-то подобное.
Единственное, о чем я могу думать, это то, что «Настройки» раньше были классом по умолчанию, но теперь это не так, но это не объясняет, как старый компонент, который я использовал из библиотеки, все еще работает. Имейте в виду, что другие компоненты, которые я импортировал раньше, такие как Image
и другие, все еще работают.
Вот и фрагмент кода нарушения:
import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight, Image, Header, Icon} from 'react-native';
import { createStackNavigator } from 'react-navigation';
export class Settings extends React.Component {
render(){
return (
<View>
<View style = {{height: 55, backgroundColor: '#007ebc'}}>
<View style = {{flexDirection: "row", marginLeft: 10}}>
<Icon //<-------USING ICON WILL GIVE ME ERROR
name = 'arrowleft'
/>
<Image source = {require("../assets/LogoLrg.png")}
style = {{ width: 55, height: 30, marginTop: 10 }}
/>
<Text style = {styles.headerText}> Settings </Text>
</View>
</View>
</View>
)
}
Если я не пропустил какое-то крупное обновление для React Native, вы не можете импортировать компоненты Header
и Icon
из react-native
, потому что они не существуют. Эти компоненты могут быть частью некоторой библиотеки с открытым исходным кодом, такой как react-native-elements
или native-base
, поэтому вам сначала необходимо установить их:
npm i native-base --save
или,
npm i react-native-elements --save
а затем используйте их:
import { Header, Icon } from 'react-native-elements' //or 'native-base'
Я не думаю, что компонент Icon
или Header
существует в библиотеке, поддерживающей реакцию.
Вы можете проверить это на собственном веб-сайте React или в исходном коде react-native.js
.
Попробуйте, изменив это так - импортируйте createStackNavigator из 'response-navigation