Question

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

但是，某些图标并未如我期望的那样显示。

这是我的代码。

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组件中，大多数情况下也可以指定类型组件，但有时会出错。

type是字体的名称，例如：“ AntDesign”，“ MaterialCommunityIcons”等

您可以搜索几乎所有图标here

为什么没有显示“本垒打”中的图标

1 个答案: