0

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

3 回答 3

4

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

于 2019-10-17T05:58:53.933 回答
1

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

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

看这个： react-native-elements

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

于 2019-10-15T14:21:51.850 回答
0

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

于 2019-10-15T18:31:10.117 回答