Не можете использовать недавно импортированные компоненты в React Native?

Я работал над этой программой, и недавно я попытался использовать некоторые новые компоненты из собственной библиотеки реакции, такие как 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>
    )
  }

Попробуйте, изменив это так - импортируйте createStackNavigator из 'response-navigation

PushpikaWan 26.10.2018 03:35
1
1
465
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если я не пропустил какое-то крупное обновление для 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'

Элементы RN: Icon, Header

Собственная база: Icon, Header

Я не думаю, что компонент Icon или Header существует в библиотеке, поддерживающей реакцию.

Вы можете проверить это на собственном веб-сайте React или в исходном коде react-native.js.

http://facebook.github.io/react-native/docs/getting-started

Другие вопросы по теме