React 本机元素类型无效，应为字符串答案

【问题标题】：React native element type is invalid expected a stringReact 本机元素类型无效，应为字符串
【发布时间】：2019-02-18 23:54:11
【问题描述】：

我是 React Native 的新手，我想使用 react-native-material-bottom-navigation。我发现了一些与此相关的其他问题，但无法为我提供一些启示。

我使用 npm 安装了依赖项并运行命令 react-native link 然后我执行了 react-native run-android

这是我在 App.js

中的代码

import React, { Component } from 'react';
import BottomNavigation, {
  FullTab
} from 'react-native-material-bottom-navigation'
import {
  View,
  Icon
  } from 'react-native';

export default class App extends Component {
  tabs = [
    {
      key: 'games',
      icon: 'gamepad-variant',
      label: 'Games',
      barColor: '#388E3C',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
      key: 'movies-tv',
      icon: 'movie',
      label: 'Movies & TV',
      barColor: '#B71C1C',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
      key: 'music',
      icon: 'music-note',
      label: 'Music',
      barColor: '#E64A19',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    }
  ]

  renderIcon = icon => ({ isActive }) => (
    <Icon size={24} color="white" name={icon} />
  )

  renderTab = ({ tab, isActive }) => (
    <FullTab
      isActive={isActive}
      key={tab.key}
      label={tab.label}
      renderIcon={this.renderIcon(tab.icon)}
    />
  )

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          {/* Your screen contents depending on current tab. */}
        </View>
        <BottomNavigation
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          tabs={this.tabs}
        />
      </View>
    )
  }
}

这是我的环境设置

Environment:
  OS: Linux 4.13
  Node: 8.11.3
  Yarn: 1.9.4
  npm: 5.6.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

如果有人可以提供帮助，我们将不胜感激。提前致谢。

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案1】：

我这样解决了我的问题：-

即使是 react native 0.60，你也必须链接矢量图标库才能像这样响应原生

react-native link react-native-vector-icons

链接到 React 原生矢量图标库 https://www.npmjs.com/package/react-native-vector-icons#bundled-icon-sets

有很多可用的图标包，您可以像下面给出的那样导入其中的任何一个。选择任何你喜欢的人

import Icon from 'react-native-vector-icons/FontAwesome';

或

import Icon from 'react-native-vector-icons/Ionicons';

例子

      <Icon
        style={{ paddingLeft: 10 }}
        onPress={() => navigation.openDrawer()}
        name="md-menu"
        size={30}
      />

【讨论】：

【解决方案2】：

react-native中没有Icon组件

您需要从 react-native-vector-icons 或其他在后台使用它的此类库中导入它。

查看library 了解更多示例

【讨论】：

那我这样导入？ import Icon from 'react-native-vector-icons'
首先检查库的安装说明，因为您需要手动链接它，然后将其导入为import Icon from 'react-native-vector-icons/FontAwesome';，无论您要使用哪个icon family。
仍有一些错误。 Invariant violation: Element type is invalid... Check the render method of App
@KnowledgeSeeker import Icon from 'react-native-vector-icons/Ionicons'; 根据文档
@KnowledgeSeeker github.com/oblador/react-native-vector-icons#basic-example

【解决方案3】：

你需要安装 react-native-vector-icons.. 转到您的 cmd 或使用终端并跳转到您的项目路径.. 做

npm install --save react-native-vector-icons

在你的项目中你应该导入

import Icon from 'react-native-vector-icons/Ionicons'

希望对你有帮助

【讨论】：