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

Question

我正在使用 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;

Answer 1

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

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

看这个： react-native-elements

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

Answer 2

如果您不想使用整个图标集，您可以像这样创建自己的 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 路径。请注意，复制的路径是小写的，库中的路径组件是大写的。

Answer 3

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

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

React-native-elements display all icons as square shape

icons

react-native

react-native-elements