Урок 5. React JS Material UI. SVG иконки

Содержание материала:

Значки SVG с Material-UI: где найти, как стилизовать?

В http://www.material-ui.com/#/components/app-bar говорится, что среди возможных свойств, которые они поддерживают, является элемент iconElementLeft. Пользовательский элемент, который должен быть отображается в левой части панели приложений, например, SvgIcon.

Теперь у меня нет стиля, как и все остальное в строке меню. Я указываю на значок svg, который я нашел, и используя атрибуты img, чтобы попытаться вставить его. Как я могу сделать материал -UI стиль это как родной?

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

Google material icons implementation for React

material-icons-react

Google material icons implementation for React.

NOTE: Version 1.0.1 release

  • Spelling mistakes corrected
  • Proptypes added
  • Unwanted dependencies for production is removed from dependencies

Introduction

This package provides a convenient react component for using Google’s Material Icons in your react application.

Features

  • Follows Material design guidelines
  • Highly customizable
  • Supports Material UI color palette off the shelf.

Usage

Import module using the following statement.

  1. Rendering an icon is straightforward.
  1. Change the icon size by using the size property.
  1. Invert the icon by using the invert property.
  1. Make the icon inactivate by using the inactive property.
  1. Change the color of an icon.
  • Using Material UI color palette.
  • Using a custom color.

Урок 5. React JS Material UI. SVG иконки

2723 просмотра

2 ответа

1391 Репутация автора

Я запутался в том, как использовать иконки в текущей версии Material-UI .

Мы предоставляем отдельный пакет NPM, @ material-ui / icons , который включает более 1000 официальных значков материалов, преобразованных в SvgIcon компоненты.

Вы можете использовать material.io/tools/icons, чтобы найти конкретную иконку. При импорте значка имейте в виду, что названия иконок — это PascalCase, например:

  • delete выставляется как @material-ui/icons/Delete
  • delete forever выставляется как @material-ui/icons/DeleteForever

Пример, который они показывают:

Это работает для многих иконок, но не для file_copy -icon.

Тем не менее, я могу заставить его работать с:

Каков ожидаемый подход, чтобы сделать эту работу?

У меня есть, с npm install —save , установлен @material-ui/icons и material-design-icons . (Изначально только первый, но после того, как все иконки не заработали, я тоже попробовал второй)

Тем не менее, я импортирую с import FileCopy from ‘@material-ui/icons/FileCopy’;

Ответы (2)

4 плюса

1221 Репутация автора

Вы можете узнать material-ui названия значков, просмотрев их node_modules/@material-ui/icons : иногда они немного отличаются от названий на сайте дизайна материалов Google!

В этом случае значок file_copy с сайта Google называется «ContentCopy» в material-ui:

Автор: ouni Размещён: 06.07.2020 02:51

4 плюса

2400 Репутация автора

Это довольно просто, как только вы установили значок:

Как вы, наверное, заметили, внутри @material-ui/icons папки не хватает значков значков , хотя, если вы перейдете к файлам svg в material.io, вы можете выбрать загрузку значка svg, который вы обычно можете использовать в том же соглашении, или вы можете сделать что они делают внутри пакета Material Icons, используя SvgIcon и вставляя svg-код, взятый с material.io сайта.

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

Урок 5. React JS Material UI. SVG иконки

This package provides all the Material Design Icons by Google, as React SVG Components. The main inspiration for this package is from @material-ui/icons, the only difference being that the latter depends on the Material-UI’s SvgIcon React Component, while this package boasts zero dependencies.

All the icons, included in the package can be found here.

The import path for each Material icon component includes the icon name in PascalCase. For example ‘access_alarm’ icon is named as ‘AccessAlarm’

Note: One exception is ‘3d rotation’, which is named ‘ThreeDRotation’.

  1. With tree-shaking configured
Prop Type Required Default Description
color string false inherit Color of the icon (Ex: ‘#000000’, ‘rgba(255, 255, 255, 1)’, ‘black’). Default being inherit, the icon will take the color of its parent.
className string false Class Name for the svg component
size number false 24 Font size of the icon
styles object false <> Inline Styles for the svg component
viewBox string false 0 0 24 24 View Box attribute to the svg tag, which is ‘0 0 24 24’ for the icons

Note: Any other prop passed will be spread on to the root element ( ).

Default Inline Styles of the Icon Component (Can be overr >

Note: The size of the icon can be adjusted font-size CSS property. (24px is the default size).

  • react
  • prop-types

This project is licensed under the terms of the MIT license.

Урок 5. React JS Material UI. SVG иконки

NOTE: Version 1.0.4 release

  • Demo app updated
  • Fix for #28

NOTE: Version 1.0.3 release

  • Demo app added
  • Fix for #1
  • Fix for #11
  • Fix for #12
  • Fix for #13
  • Passing in className prop will replace the default icon styles, defaultColor and inactive styles. Own styles for these should be prov >

This package provides a convenient react component for using Google’s Material Icons in your react application.

Import module using the following statement.

  1. Rendering an icon is straightforward.
  1. Change the icon size by using the size property.
  1. Invert the icon by using the invert property.
  1. Make the icon inactivate by using the inactive property.
  1. Change the color of an icon.
  • Using Material UI color palette.
  • Using a custom color.

Showing a preloader until the icon is rendered(For slow connections)

  1. CSS
  1. Preloader element
  1. Icon

Icon size matrix

Alias Size
tiny 18px
small 24px
medium 36px
large 48px

Please feel free to create PR for any improvements and contributions.

React Material UI Example Tutorial

React Material UI Example is today’s leading topic. It is the React components that implement Google’s Material Design. Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing. Material-UI supports the latest and stable releases of across all the browsers and platforms. They also support Internet Explorer 11. You don’t need to provide any JavaScript polyfill as we manage unsupported browser features internally and in isolation. Let us take the React Material Example Tutorial From Scratch.

React Material UI Example

Let us first install React.js using the following commands.

#1: Install React.js

If you are facing any issue on compiling then, please create a .env file on the root and add the following line of code.

#2: Install Material-UI

Type the following command to install Material-UI.

Now, modify the following code inside the App.js file.

Save the file and go to the browser and you can see that we have successfully integrated the Material UI.

#SVG Icons

You can install the prebuild SVG icons using @material-ui/icons package.

#Fonts

You can include the stylesheets inside the index.html file.

We can use the buttons as well as icons using the following code.

You can use material.io/tools/icons to find a specific icon. When importing an icon, keep in mind that the names of the icons are PascalCase.

Notable props for the Button component include:

  • variant: The visual style of the component, either contained, outlined, fab, or empty for the default link-style.
  • color: One of primary, secondary, or default, which is the same color as if it’s left empty. We’ll cover the customization of these colors later.
  • mini: If the variant is set to fab (floating action button), then the size of the button is reduced.

#Navbar

Let us create a component inside the src folder called Navbar.js and add the following code.

Now, import Navbar.js component inside the App.js component.

Now, you can see that we have implemented the basic design of the Navigation bar.

#TextField

Add a following code inside the App.js file.

Save the file, and you can see the textbox. The TextField, we have imported from @material-ui/core/TextField, behaves like the standard React input component.

#Cards

Create one file called Card.js inside the src folder. Add the following code inside the Card.js file.

Save the file and import the Card.js file inside the App.js file.

#Theming

Material-UI uses the JavaScript-based approach to theming its components called CSS-in-JS. With the help of this approach, CSS classnames are generated using JavaScript objects.

To pass the styles object into our component, we will use the withStyles function to return the higher-order component that gives our classnames as a prop called classes.

Creating the custom theme

To create a custom theme, use a createMuiTheme function and pass its return value to a MuiThemeProvider element at root of your App.

Now, all children of a MuiThemeProvider have the uniformly customizable style!

A createMuiTheme function usually takes the object to define a theme:

All colors, including a primary and the secondary colors we used earlier in the tutorial, are all themeable. The full range of options can be found in the official theming documentation. Material-UI is a great way to add the polished look and feel to the controls of your React web application with little effort.

Finally, React Material UI Example Tutorial is over.

Krunal Lathiya is From India, and he is an Information Technology Engineer. By profession, he is the latest web and mobile technology adapter, freelance developer, Machine Learning, Artificial Intelligence enthusiast, and primary Author of this blog.

Создание значка SVG React Material-UI в модуле NPM с синтаксисом ES6

Я создал собственный значок SVG в своем приложении Meteor / React / Material UI. Код для значка как

Это прекрасно работает, поэтому я решил создать модуль NPM для таких иконок, чтобы другие могли его использовать. Я создал модуль с кодом вроде

но когда я использую это в приложении, я получаю эту ошибку

Msgstr «Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.»

Я использую Babel для переноса файла и вижу, что переносимый файл выглядит так:

Если я пишу файл не в ES6, как:

Работает нормально, но лучше написать в ES6. В чем может быть проблема?

Полное руководство по React JS material-ui

26.06.2020 Комментарии к записи Полное руководство по React JS material-ui отключены 620 Просмотров

От автора: в React JS material-ui — это часть Material Design. Material Design — это язык дизайна, впервые представленный Google в 2014 году. Это визуальный язык, который использует макеты на основе сетки, гибкую анимацию и переходы, дополнения и эффекты глубины, такие как освещение и тени. Цель Material Design сводится к трем вещам: Создание, Унификация и Настройка.

Создание — Material Design направлен на предоставление визуального языка, который синтезирует классические принципы дизайна. Унификация — он нацелен на разработку единой базовой системы, которая объединяет пользовательский интерфейс на разных платформах, устройствах и методах ввода. И Настройка обеспечивает визуальный язык и гибкую основу для инноваций и брендинга.

В этой статье мы рассмотрим, как создавать приложения React в стиле Material Design. Существуют различные библиотеки, которые помогают в этом, но для этой статьи мы будем использовать библиотеку material-ui.

Приступаем к работе

material-ui — это набор компонентов React, который реализует Google Material Design (material-ui недавно выпустили v1 библиотеки). Эти компоненты работают изолированно, это означает, что они являются само-поддерживающими и вводят только те стили, которые они должны отображать.

Чтобы начать работу с материалом-ui, все, что вам нужно, это запустить команду терминала, приведенную ниже.

Далее, давайте рассмотрим некоторые из основ material-ui, относящихся к Material Design, и посмотрим, как она настраивается.

Типографика

Когда речь заходит о Material Design, шрифтом по умолчанию является Roboto. Однако material-ui не поставляется с Roboto по умолчанию. Шрифт можно импортировать в проект React с использованием одного из двух методов. Из CDN:

Установить с помощью NPM

Вы можете установить его в качестве пакета npm, введя в терминале команду:

Затем вы можете импортировать его в свой проект следующим образом:

material-ui также предоставляет компонент под названием Typography. Компонент Typography в основном позволяет отображать текст в приложении.

Свойство variant помогает применять стили оформления темы, а color — это цвет компонента. Он поддерживает цвета тем, которые подходят для компонента.

CSS Baseline

Если вы писали код front-end, вы уже должны знать о normalize.css. Если нет, это набор для нормализации элементов HTML и атрибутов стилей. material-ui предоставляет собственную версию normalize.css — CssBaseline, компонент, который обеспечивает изящный, последовательный и простой набор базовых стилей. CSSBaseline делает следующее:

Закрепляет отступы во всех браузерах

Применяет цвет фона Material Design по умолчанию.

Включает сглаживание шрифтов для лучшего отображения шрифта Roboto

Базовый размер шрифта не указывается в html, но предполагается, что это 16px (размер браузера по умолчанию)

Сетка

Адаптивный пользовательский интерфейс Material Design основан на макете с 12 столбцами. Эта сетка создает визуальную согласованность между макетами.

Система сетки material-ui характеризуется следующим:

Содержит два типа макетов: контейнеры и элементы

Ширина элементов задается в процентах, поэтому они всегда являются гибкими и их размер указан относительно их родительского элемента

Элементы имеют отступы для создания интервала между отдельными элементами.

Существует пять контрольных точек сетки: xs, sm, md, lg и xl

Иконки

Иконки — важная часть Material Design, они используются в кнопках для обозначения действия, для передачи информации и т.д. Они используются для обозначения команды, файла, устройства или каталога.

Иконки также используются для представления таких действий, как «В корзину», «Печать» и «Сохранить», которые обычно встречаются в панелях приложений, панелях инструментов, кнопках и списках.

Иконки в material-ui могут отображаться с использованием двух методов: Icon для отображения шрифтов иконок и SvgIcon для визуализации SVG контуров.

Компонент SvgIcon принимает элемент SVG-контура в качестве своего дочернего элемента и преобразует его в компонент React, который отображает контур, и делает возможным определение стилей иконки и реакцию на события мыши. Это можно увидеть в следующем примере:

Material- ui также содержит пакет, который поставляется с предустановленными иконками, которые будут использоваться в приложении React. Это совсем другой пакет, и он включает официальные иконки Material, преобразованные в компоненты SvgIcon. Вы можете установить его с помощью следующей команды:

Кнопки

Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием. Они помогают сообщать о действии, которое может предпринять пользователь. Поскольку компоненты material-ui изолированы, вам нужно импортировать компонент Button.

Компонент Button может принимать множество реквизитов, таких как цвет, вариант, размер и т.д. Полный список вы можете посмотреть здесь.

Кнопки в Material-ui и Material Design в целом могут принимать любую из следующих форм:

Плоские кнопки

Плоские кнопки — это кнопки только с текстом. Они не имеют цвета фона и не имеют границы. Они могут использоваться в диалогах, панелях инструментов или встраиваться в элементы. Они не имеют заливки, но при печати заполняются цветом.

Контурные кнопки

Контурные кнопки — это текстовые кнопки средней выразительности. Они ведут себя как плоские кнопки, но имеют контур и обычно используются для важных действий, но не являются основными кнопками действия в приложении. Их внешний вид обычно характеризуется границей и обозначением цвета фона при наведении.

Поднятые кнопки

Поднятые кнопки представляют собой прямоугольные кнопки. Они изменяют цвет фона и смещаются при наведении.

Гибкие кнопки действия

Гибкие кнопки действия (FAB) представляют основные действия, такие как составление нового электронного письма, добавление нового контакта или удаление изображения.

Они имеют форму круга и отличаются от всех других видов кнопок. При выделении фокусом применяется отличный цвет фона, при нажатии или клике они смещаются. Они могут также использоваться, чтобы показать другие действия или контент при нажатии.

Компоненты material-ui

material-ui содержит много компонентов пользовательского интерфейса, которые помогают создавать приложение React в теме Material Design. Давайте рассмотрим некоторые компоненты material-ui. Для каждого из компонентов приведен пример, и вы можете просмотреть код на CodeSandbox, перейдя по соответствующим ссылкам.

Панель приложения

Панель приложения, ранее известная как панель действий в Android, выполняет роль меню навигации. Это панель инструментов, используемая для брендинга, навигации, поиска и действий. Чтобы использовать панель приложения, необходимы эти два компонента из material-ui:

Навигация

Нижние навигационные меню располагаются внизу, они позволяют легко переключаться между представлениями верхнего уровня одним нажатием.

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

Вкладки

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

Списки

Списки представляют несколько пунктов, расположенных вертикально, которые составляют единый элемент. Списки состоят из непрерывного столбца строк. Каждая строка содержит плитку. Первичные действия представлены плитками, а дополнительные — иконками и текстом.

Карточки

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

Модальные компоненты

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

Управляет стеком диалога

Создает фон, для отключения взаимодействия ниже модального компоненты

Корректно управляет фокусом, переходя к модальному контенту и сохраняя его, пока модальный компоненты не будет закрыт

Отключает прокрутку содержимого страницы при открытии

Автоматически добавляет соответствующие роли ARIA

Список сетки

Списки сетки являются альтернативой стандартным представлениям списков, рассмотренным выше. Список сетки состоит из повторяющегося шаблона ячеек, размещенных вертикально и горизонтально, и в них обычно выводятся изображения.

Дополнительный пример списка Grid можно увидеть ниже, он использует GridListTileBar для добавления наложения в каждый GridListTile. Наложение может содержать заголовки, подзаголовки и вторичное действие — в этом примере IconButton — которые могут использоваться для передачи дополнительной информации.

Таблицы

В таблицах данных отображаются наборы необработанных данных. Они обычно используются в стационарных корпоративных продуктах.
Таблица данных содержит строку заголовка вверху, в которой перечислены названия столбцов, а затем строки данных. Для доступности первый столбец установлен в качестве элемента th со scope — «row». Это позволяет экранным дикторам идентифицировать значение ячейки по имени строки и столбца.

Расширенное использование таблиц можно увидеть в приведенном ниже примере. Здесь применяются чек-боксы, которые размещаются в каждой строке, если пользователю нужно выбирать или манипулировать данными. Здесь также используются клибальные строки с возможностью их выбора.

Заключение

Вопрос в том, должны ли вы использовать Material Design в своем проекте React? Ответ на этот вопрос зависит от использования вашего проекта и того, чего вы пытаетесь достичь. Material Design может дать рекомендации по улучшению пользовательских интерфейсов для приложений. Это может вдохновить ваших дизайнеров задуматься о иерархии информации, основываясь на руководящих принципах.

В то же время, если вы пытаетесь провести ребрендинг, Material Design может и не быть тем, что вы ищете. Вы хотите, чтобы ваш бренд выглядел как сотни других веб-сайтов в Интернете? Вы также можете изучить другие библиотеки Material Design, такие как response-md, materialize (CSS framework).

Автор: Yomi

Редакция: Команда webformyself.

11 библиотек (наборов компонентов) для React Native, о которых стоит знать в 2020-м

В начале года мы опубликовали несколько материалов о популярных наборах компонентов для React, Angular и Vue. Сегодня мы представляем вашему вниманию перевод статьи из той же серии, посвящённой React Native. Учитывая непрекращающийся рост популярности React, и то, что мобильные приложения и PWA становятся всё востребованнее, неудивителен тот факт, что React Native привлекает всё большее внимание сообщества разработчиков.

Фреймворк React Native очень похож на React в том плане, что его применение подталкивает программиста к созданию пользовательских интерфейсов с использованием изолированных компонентов. Наборы таких компонентов, предназначенные для разработки интерфейсов, дают разработчикам готовые модули, использование которых помогает экономить время, ускоряя работу. Здесь мы обсудим одиннадцать наборов компонентов, которые отличаются хорошей поддержкой их создателей. Они, надеемся, пригодятся всем, кому приходится разрабатывать интерфейсы на React Native

1. NativeBase

NativeBase — это кросс-платформенный набор компонентов пользовательского интерфейса для React Native.

О серьёзной популярности NativeBase говорит то, что данный проект набрал около 10 тысяч звёзд на GitHub, и то, что у него имеется около тысячи форков. NativeBase даёт в распоряжение программистов десятки кросс-платформенных компонентов. При использовании NativeBase можно, без дополнительных усилий, применять любые нативные библиотеки сторонних разработчиков, да и вокруг самого этого проекта сложилась обширная экосистема, в которой имеется много всего полезного — от средств для создания базовых проектов, до инструментов для разработки тем, служащих для настройки внешнего вида компонентов NativeBase.

2. React Native Elements

Набор кросс-платформенных компонентов React Native Elements собрал около 12 тысяч звёзд на GitHub. Компоненты из этого набора, полностью созданного средствами JavaScript, поддаются тонкой настройке.

React Native Elements

Авторы набора заявляют, что самое главное в React Native Elements — это структура компонентов, а не их дизайн. Это означает, что для настройки некоего компонента и подготовки его к работе нужно совсем немного шаблонного кода. При этом у того, кто использует эти компоненты, имеется возможность полностью контролировать их внешний вид. Такой подход к компонентам может привлечь внимание к ним широких слоёв веб-программистов — от начинающих, до опытных. Вот демонстрационное приложение, построенное на базе React Native Elements, с помощью которого можно увидеть компоненты этого набора в действии.

3. Shoutem UI Toolkit

Набор инструментов для разработки интерфейсов Shoutem, собравший около 3,5 тысяч звёзд на GitHub, состоит из трёх частей. Это — компоненты пользовательского интерфейса, темы, и анимации компонентов.

Shoutem даёт разработчикам набор кросс-платформенных компонентов, предназначенных для iOS и Android. Все компоненты созданы с учётом возможности их совместного использования. Их внешний вид можно настраивать. У каждого компонента, кроме того, имеется стандартный стиль, согласующийся со стилем других компонентов. Это даёт возможность создания комплексных компонентов без необходимости вручную настраивать сложные системы стилей.

4. UI Kitten

Набор компонентов UI Kitten, обладатель примерно 3 тысяч звёзд на GitHub, даёт в распоряжение разработчика React Native-компоненты, поддающиеся тонкой настройке и подходящие для повторного использования.

В основе UI Kitten лежит идея перемещения определения стилей в определённое место, что помогает повторно использовать компоненты и облегчает настройку их внешнего вида. Темы, применяемые к компонентам, довольно легко менять, что называется, «на лету», передавая им разные наборы переменных. Вот демонстрационный проект, поэкспериментировав с которым, можно познакомиться с UK Kitten поближе.

5. React Native Material UI

Проект React Native Material UI, имеющий около 2 тысяч звёзд на GitHub, даёт в распоряжение веб-разработчика набор компонентов пользовательского интерфейса, реализующих идеи Material Design от Google и поддающихся настройке. При работе с React Native Material UI стоит учесть то, что эта библиотека использует единственный JS-объект, называемый uiTheme , который, для обеспечения максимального уровня настраиваемости, передаётся через контекст.

React Native Material UI

По умолчанию объект uiTheme основывается на теме lightTheme , которую можно найти здесь. А вот — список компонентов библиотеки с примерами их использования.

6. React Native Material Kit

Хотя пакет React Native Material Kit опубликован в NPM в декабре 2020 года, этот набор компонентов, имеющий около 4 тысяч звёзд на GitHub, стоит того, чтобы обратить на него внимание.

React Native Material Kit

React Native Material Kit предлагает разработчику коллекцию простых и удобных компонентов пользовательского интерфейса и тем, реализующих концепцию Material Design от Google. Почему этот набор компонентов достоин внимания? Всё дело в его простоте, и в том, что в нём нет ничего лишнего, создающего информационный «шум». Однако надо отметить, что из-за того, что эта библиотека не особенно активно поддерживается, пользоваться ей следует с осторожностью.

7. Nachos UI

Библиотека Nachos UI, имеющая около 1,5 тысяч звёзд на GitHub, предлагает разработчикам набор из более чем 30 настраиваемых компонентов, которые, помимо применения их в мобильной среде в составе React Native-приложений, подходят и для разработки веб-приложений с использованием react-native-web.

Nachos UI поддерживает prettier, yarn и тестирование средствами jest. Эта приятная, качественно написанная библиотека, даёт в распоряжение всех желающих компоненты, обладающие интересным дизайном, и глобальный менеджер тем.

8. React Native UI Library

Работой над проектом React Native UI Library занимаются в Wix. Он представляет собой ультрасовременный набор инструментов для разработки пользовательских интерфейсов и библиотеку компонентов для React Native. React Native UI Library поддерживает, без дополнительных усилий со стороны программиста, react-native-animatable и react-native-blur.

React Native UI Library

Эта библиотека включает в себя набор предустановок стилей (среди них — Colors, Typography, Shadows, Border Radius и другие), которые транслируются в модификаторы.

Вот пример использования React Native UI Library.

9. React Native Paper

Кросс-платформенная библиотека компонентов React Native Paper, обладающая примерно 1,5 тысячами звёзд на GitHub, следует идеям Material Design от Google.

React Native Paper

Этот набор компонентов поддерживает глобальные темы. При необходимости, для того, чтобы избавиться от неиспользуемых модулей этого набора, можно воспользоваться соответствующим плагином для babel. Вот пример использования React Native Paper.

10. React Native Vector Icons

Проект React Native Vector Icons, собравший около 10 тысяч звёзд на GitHub, представляет собой обширную коллекцию настраиваемых значков для React Native-приложений, подходящих для использования на различных платформах.

React Native Vector Icons

Значки из React Native Vector Icons применяются в тысячах приложений. Вполне возможно, что они пригодятся и вам.

11. Teaset

В библиотеку Teaset, собравшую около 1300 звёзд на GitHub, входит более 20 компонентов, написанных на чистом JS (ES6).

Проект не может похвастаться богатой документацией, но простота имеющихся в нём компонентов, ориентированных на обслуживание базовых потребностей React Native-приложений, и их приятный внешний вид, позволяют говорить о том, что на Teaset, по крайней мере, стоит взглянуть.

Итоги

В начале этого материала мы говорили о том, что React Native привлекает всё большее внимание сообщества разработчиков за счёт распространённости React и популярности мобильных приложений. Поэтому неудивительно то, что число достойных разработок, реализующих наборы компонентов или вспомогательные инструменты для создания React Native-приложений, никак нельзя ограничить теми, что мы рассмотрели выше. Если вы занимаетесь поиском чего-то подобного для своего React Native-приложения, вот ещё несколько проектов, на которые стоит обратить внимание:

Создание значка SVG React Material-UI в модуле NPM с синтаксисом ES6

Я создал собственный значок SVG в своем приложении Meteor / React / Material UI. Код для значка как

Это прекрасно работает, поэтому я решил создать модуль NPM для таких иконок, чтобы другие могли его использовать. Я создал модуль с кодом вроде

но когда я использую это в приложении, я получаю эту ошибку

Msgstr «Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.»

Я использую Babel для переноса файла и вижу, что переносимый файл выглядит так:

Если я пишу файл не в ES6, как:

Работает нормально, но лучше написать в ES6. В чем может быть проблема?

Топ-пост этого месяца:  Несколько способов оптимизировать CSS и JavaScript для ускорения загрузки сайта
Добавить комментарий