为什么没有显示来自'native-base‘的图标

Question

我正在使用React Native开发iOS应用程序，并在导航栏中使用native-base中的Icon。

然而，一些图标并没有像我期望的那样出现在那里。

这是我的代码。

import React, { Component } from 'react';
import {
  View,
  Text,
} from 'react-native';
import { Icon } from 'native-base';

export default class HomeTab extends Component {

  static navigationOptions = {
    tabBarIcon: ({tintColor}) => (
      <Icon name='md-add-circle-outline' style={{color: tintColor}} />
    )
  };

  render() {
    return (
      <View>
        <Text>
          HomeTab
        </Text>
      </View>
    )
  }
}

这段代码应该显示下面的图标。https://gyazo.com/b9a19f8de26261cb62e834cd7a0ca867

但实际上，下面的图标是显示出来的。https://gyazo.com/5476d5b168f51014038470d85381c9e9

我想，这就是icon reference site。

这是我的package.json。

{
  "name": "Sample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "native-base": "^2.12.1",
    "react": "16.8.6",
    "react-native": "0.59.7",
    "react-native-gesture-handler": "^1.2.1",
    "react-native-vector-icons": "^6.4.2",
    "react-navigation": "^3.9.1"
  },
  "devDependencies": {
    "@babel/core": "7.4.4",
    "@babel/runtime": "7.4.4",
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

在Icon component中也指定了类型component，大多数情况下它是有效的，但有时会出现错误。

type是字体的名称，例如：'AntDesign‘、'MaterialCommunityIcons’等

你可以搜索几乎所有的图标here