在 React Native 中不能使用新导入的组件？

Posted 2023-02-23

【中文标题】在 React Native 中不能使用新导入的组件？

【英文标题】：Can't use newly imported components in React Native?

【发布时间】：2019-03-30 17:03:53

【问题描述】：

我一直在研究这个程序，最近我尝试使用 react-native 库中的一些新组件，例如 Icon 和 Header 但每当我尝试在渲染函数中使用它们时都会出错：

"Invariant Violation: Invariant Violation: Element type is invalid: 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记导出您的组件从它定义的文件中，或者您可能混淆了默认和命名导入。”

这对我来说真的很奇怪，因为我曾经并且现在仍然使用 Image、Text 和 View 等组件没有问题，所以我不明白为什么我现在会遇到问题这些新组件。我不确定我在程序中所做的更改会导致发生这种情况。

我唯一能想到的是“设置”曾经是一个默认类，但现在不是，但这并不能解释我从库中使用的旧组件如何仍然有效。请记住我之前导入的其他组件，例如 Image，其他组件仍然有效。

这是有问题的代码的sn-p：

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-navigation 导入 createStackNavigator

【参考方案1】：

除非我错过了 React Native 的一些重大更新，否则您不能从 react-native 导入 Header 和 Icon 组件，因为它们不存在。这些组件可能是某些开源库的一部分，例如 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

【参考方案2】：

我认为 react-native 库中不存在 Icon 或 Header 组件。

你可以在 react native 网站或者react-native.js源码中查看。

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