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

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

0 голосов
/ 26 октября 2018

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

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Я не думаю, что * * * * * * * * * * * * * *

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

0 голосов
/ 26 октября 2018

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

...