React-native-elements 将所有图标显示为方形答案

【问题标题】：React-native-elements display all icons as square shapeReact-native-elements 将所有图标显示为方形
【发布时间】：2019-10-15 10:07:53
【问题描述】：

我正在使用 react-native-elements 创建一个移动应用程序。每当我在应用程序中使用图标时，无论图标是什么，它都会显示为一个正方形。我按照文档进行操作，但无法正常工作。

这是它呈现图标的方式。

在第一个和第二个地方，我想分别放置汉堡图标和一个搜索图标，但是显示为正方形。

对应代码

import React from 'react';
import { Header,Text } from 'react-native-elements'
import { Icon } from 'react-native-elements'

const Menu = (props) => {
    return(
        <Icon
  name='menu' onPress={ () => {
    props.navigation.openDrawer()
}}/>

    )
}

const ActionBar = props => {
    return (
        <Header
        placement="left"
        leftComponent={<Menu navigation={props.navigation}/>}
        centerComponent={{ text: 'OnTask', style: { fontSize: 20,color: '#fff' } }}
        rightComponent={{ icon: 'search', color: '#fff' }}
      />
    );
};

export default ActionBar;

【问题讨论】：

是的，当图标标签无法识别这些地方的图标名称时会发生此错误。最好是下载并显示为图像。
但是 react-native 元素声称它通过react-native-vector-icons 支持图标，我也安装了它。您能建议一种无需下载所有图标即可使其正常工作的方法吗？

标签： react-native icons react-native-elements

【解决方案1】：

查看React Native docs about auto linking 后，我得出结论，自动链接仅适用于 NPM。由于我使用了Yarn，所以我在项目文件夹中运行了react-native link react-native-vector-icons，问题就解决了。

【讨论】：

【解决方案2】：

你需要安装 npm install react-native-vector-icons 并像这样导入它：

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

看这个： react-native-elements

我使用react-native-vector-icons/Fondisto 作为图标。你可以找到所有你想要的图标：Fondisto

【讨论】：

我已经安装好了。这就是为什么我如此沮丧。我将卸载并重新安装它，看看它是否能解决问题..

【解决方案3】：

如果你不想使用整个图标集，你可以像这样创建自己的 SVG 组件：

import React from "react";
import Svg, { Path } from "react-native-svg";

type TProps = Readonly<{
  size: number;
  color: string;
}>;

export default class ArrowLeft extends React.PureComponent<TProps> {
    render() {
        const {size, color} = this.props;
        return (
            <Svg
                viewBox="64 64 896 896"
                data-icon="arrowLeft"
                width={size}
                height={size}
                fill={color}
                aria-hidden="true">
                    <Path d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></Path>
            </Svg>
        );
    }
}

您可以在检查网站上的 SVG 元素时检查 SVG 路径。请注意，复制的路径是小写的，库中的路径组件是大写的。

【讨论】：