Хобрук: Ваш путь к мастерству в программировании

Добавить иконку с кнопкой пользовательского интерфейса React нативного материала

Я использовал следующий интерфейс материалов для React Native.

Нативный интерфейс материалов React

Из этой библиотеки я создал кнопку со следующим кодом

<Button raised  upperCase={false} 
 text="Facebook"/>

Кнопка успешно создана.

Теперь я хочу разместить значок facebook перед текстом facebook. Как указано в приведенной выше библиотеке, я сделал это со следующим кодом

<Button raised  upperCase={false} icon="add-circle"  
     text="Facebook"/>

Но в этой библиотеке нет значка с именем «fb» или «facebook».

Итак, теперь я хочу включить значок facebook или мой файл значка fb.png в эту кнопку.

Я новичок в разработке приложений React Native. Как я могу сделать это, используя ту же библиотеку?

Если я делаю что-то неправильно, любезно направляйте меня.

react-native material-ui
13.03.2017

Ответы:


1

Я знаю, что уже слишком поздно, но это может помочь кому-то. У MaterialIcons нет значка facebook, поэтому вам нужно получить значок facebook со следующим кодом

<Button
   large
   iconLeft
   fontWeight='bold'
   backgroundColor='#3b5998'
   icon={{name: 'facebook', type: 'font-awesome'}}
   title='Connect With Facebook' />
19.07.2017
  • Спасибо за Ваш ответ. Но это не работает. Импортируются ли какие-либо пакеты для этих значков? потому что я получил предупреждение о том, что для кнопки указан неверный значок реквизита. Вы пробовали это? 19.07.2017
  • Да. Попробуйте приведенный выше код с этим github.com/react-native-training/react- нативные элементы 19.07.2017
  • Да, это возможно на реагирующих нативных элементах. Было бы хорошо, если бы эта функция была доступна на (github.com/xotahal/react-native- материал-пользовательский интерфейс). Спасибо @Джеффри Раджан. 19.07.2017
    • Новые материалы
    Введение в контекст React
    В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..
    Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
    Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..
    Это оно
    Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..
    7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
    Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...
    Базовое руководство по переносу концепций обучения в глубокое обучение
    Обзор По мере того, как машинное обучение становится все более мощным и продвинутым, модели, обеспечивающие эту расширенную возможность, становятся все больше и начинают требовать огромного..
    C в C.R.U.D с использованием React-Redux
    Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..
    5 обязательных элементов современного инструмента конвейера данных
    В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..