React-native-элементы отображают все значки в виде квадратной формы

Question

Я создаю мобильное приложение, использующее реагирующие нативные элементы. Всякий раз, когда я использую значки в приложении, независимо от того, что это за значок, он отображается в виде квадрата. Я следовал за документами, но не смог заставить его работать.

Вот как это делает иконки.

В первом иВо-вторых, я хочу разместить значок гамбургера и значок поиска соответственно, но он отображается в виде квадратов.

соответствующий код

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-vector-icons/Fondisto для иконок. Вы можете найти все значки, которые вы хотите: Fondisto

Answer 2

Посмотрев Реагируя на документы Native об автоматическом связывании , я пришел к выводу, что автоматическое связывание хорошо работает только с NPM. Поскольку я использовал Yarn, я запустил react-native link react-native-vector-icons в папке проекта, и проблема была решена.

Answer 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 на веб-сайте. Будьте осторожны, скопированные пути строчные, компоненты пути из библиотеки прописными.