Блог

Главная - Вопросы по программированию - Невозможно использовать все значки в векторных значках Expo

Невозможно использовать все значки в векторных значках Expo

#react-native #expo #react-native-vector-icons

#react-native #expo #react-native-vector-icons

Вопрос:

Итак, это в основном код, который у меня есть

 import { Ionicons } from '@expo/vector-icons';

class DrawerItem extends React.Component {
    render() {
        return (
            <Ionicons name="speedometer" size={14} color="green" />
        )
    }
}

Я пытаюсь использовать значок с именем speedometer , как указано в документации Ionicons.
Однако на его месте появляется знак вопроса ? , и я получаю следующую ошибку:

 Warning: Failed prop type: Invalid prop `name` of value `speedometer` supplied to `Icon`, expected one of ["ios-add","ios-add-circle","ios-add-circle-outline","ios-airplane","ios-alarm","ios-albums","ios-alert","ios-american-football","ios-analytics","ios-aperture","ios-apps","ios-appstore","ios-archive","ios-arrow-back","ios-arrow-down","ios-arrow-dropdown","ios-arrow-dropdown-circle","ios-arrow-dropleft","ios-arrow-dropleft-circle","ios-arrow-dropright","ios-arrow-dropright-circle"...

Ошибка показывает мне имена, которые я могу использовать, но не имеет смысла, потому что в документации Ionicons упоминается, что есть вызываемый значок speedometer .

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

Тем не менее, я хотел бы добавить его. Есть ли способ включить ВСЕ значки из библиотеки Ionicons?

Ответ №1:

Вы должны импортировать значки таким образом:

 import { MaterialCommunityIcons } from '@expo/vector-icons';
<MaterialCommunityIcons name="speedometer" size={24} color="black" />

Ответ №2:

Как вы заявили Ionicons , не содержит speedometer значка. Вместо этого используйте ios-speedometer .

Если вам действительно нужен этот конкретный значок, я бы рекомендовал загрузить SVG и преобразовать его в отдельный компонент, используя, например, react-svgr (или любой другой инструмент svg jsx)

Не забудьте установить react-native-svg 🙂 Теперь вы можете импортировать значок с помощью обычного импорта.

Например. import SpeedometerIcon from './icons/Speedometer.js'

Метки: