Question

我一直在研究此程序，最近我尝试使用react-native库中的一些新组件，例如Icon和Header，但是每当我尝试在渲染器中使用它们时，功能我得到错误：

“不变违例：不变违例：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了导出组件从其定义文件中删除，或者您可能混淆了默认导入和命名导入。”

这对我来说真的很奇怪，因为我曾经而且现在仍在使用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>
    )
  }

Answer 1

除非我错过了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

Answer 2

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

您可以在react native网站或react-native.js源代码中对其进行检查。

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

无法在React Native中使用新导入的组件？

2 个答案: