No início do ano, publicamos vários materiais em conjuntos de componentes populares para
React ,
Angular e
Vue . Hoje, chamamos a atenção para a tradução de um artigo da mesma série sobre o React Native. Dada a popularidade continuada do React e o fato de os aplicativos móveis e o
PWA estarem se tornando mais populares, não é de surpreender que o
React Native esteja atraindo cada vez mais atenção da comunidade de desenvolvedores.
A estrutura React Native é muito semelhante à React, pois seu aplicativo incentiva o programador a criar interfaces de usuário usando componentes isolados. Os kits desses componentes, projetados para o desenvolvimento de interfaces, oferecem aos desenvolvedores módulos prontos, cuja utilização ajuda a economizar tempo acelerando o trabalho. Aqui discutimos onze conjuntos de componentes que são bem suportados por seus criadores. Esperamos que eles sejam úteis para quem precisa desenvolver interfaces no React Native.
1. NativeBase
NativeBase é um conjunto de plataforma cruzada de componentes da interface do usuário para o React Native.
NativebaseA séria popularidade do NativeBase é indicada pelo fato de que este projeto obteve cerca de 10 mil estrelas no GitHub e de cerca de mil garfos. O NativeBase coloca dezenas de componentes de plataforma cruzada à disposição dos programadores. Ao usar o NativeBase, você pode, sem esforços adicionais, usar qualquer biblioteca nativa de terceiros e, em torno deste projeto, existe um extenso ecossistema no qual há muitas coisas úteis - desde
ferramentas para criar projetos básicos até
ferramentas para desenvolver temas que servem para configurar recursos externos. visualização dos componentes NativeBase.
2. Reagir elementos nativos
O conjunto de componentes de plataforma cruzada
React Native Elements coletou cerca de 12 mil estrelas no GitHub. Os componentes deste conjunto completo de JavaScript são altamente personalizáveis.
Reagir elementos nativosOs autores do kit
dizem que a coisa mais importante no React Native Elements é a estrutura dos componentes, não o design. Isso significa que, para configurar um componente e prepará-lo para o trabalho, é necessário muito pouco código de modelo. Ao mesmo tempo, quem usa esses componentes tem a oportunidade de controlar completamente sua aparência. Essa abordagem de componentes pode atrair a atenção de grandes camadas de programadores da Web, de iniciantes a experientes.
Aqui está um aplicativo de demonstração criado com base no React Native Elements, com o qual você pode ver os componentes deste kit em ação.
3. Shoutem UI Toolkit
O
kit de ferramentas de desenvolvimento de interface
Shoutem , que coletou cerca de 3.500 estrelas no GitHub, consiste em três partes. Estes são
componentes da interface do usuário,
temas e
animações de componentes.
ShoutemShoutem fornece aos desenvolvedores um conjunto de componentes de plataforma cruzada projetados para iOS e Android. Todos os componentes são criados levando em consideração a possibilidade de seu uso conjunto. Sua aparência pode ser
personalizada . Cada componente também possui um estilo padrão consistente com o estilo dos outros componentes. Isso possibilita a criação de componentes complexos sem a necessidade de configurar manualmente sistemas de estilos complexos.
4. UI Kitten
O kit de componentes
UI Kitten , proprietário de aproximadamente 3.000 estrelas no GitHub, coloca à disposição do desenvolvedor os componentes React Native que são altamente personalizáveis e adequados para reutilização.
Ui gatinhoO UI Kitten é baseado na idéia de mover as definições de estilo para um local específico, o que ajuda a reutilizar componentes e facilita a personalização de sua aparência. Os tópicos aplicados aos componentes são bastante fáceis de alterar, como dizem, em tempo real, transmitindo-lhes diferentes conjuntos de variáveis.
Aqui está um projeto de demonstração, experimentando o qual, você pode conhecer melhor o UK Kitten.
5. Reagir interface do usuário do material nativo
O projeto de
interface do usuário do React Native Material , que possui cerca de 2.000 estrelas no GitHub, fornece ao desenvolvedor da Web um conjunto de componentes da interface do usuário que implementam as idéias de design de material do Google e são personalizáveis. Ao trabalhar com a interface do usuário do React Native Material, vale a pena considerar que esta biblioteca usa um único objeto JS chamado
uiTheme , que, para garantir o nível máximo de personalização, é passado pelo contexto.
Reagir interface do usuário do material nativoPor padrão, o objeto
uiTheme baseado no tema
lightTheme , que pode ser encontrado
aqui . E
aqui está uma lista de componentes da biblioteca com exemplos de seu uso.
6. Kit Reagir Material Nativo
Embora o
React Native Material Kit tenha sido publicado no NPM em dezembro de 2017, esse conjunto de componentes, com cerca de 4 mil estrelas no GitHub, merece atenção.
Kit Reagir Material NativoO Kit React Native Material oferece ao desenvolvedor uma coleção de componentes e temas simples e convenientes da interface do usuário que implementam o conceito do Google Material Design do Google. Por que esse conjunto de componentes merece atenção? O ponto principal é a sua simplicidade e o fato de não haver nada supérfluo nele que crie um "ruído" informativo. No entanto, deve-se notar que, devido ao fato de que essa biblioteca não é particularmente ativamente suportada, ela deve ser usada com cautela.
7. interface do usuário dos nachos
A biblioteca de
interface do usuário Nachos , que possui cerca de 1.500 estrelas no GitHub, oferece aos desenvolvedores um conjunto de mais de 30 componentes personalizados que, além de usá-los em um ambiente móvel como parte dos aplicativos React Native, também são adequados para o desenvolvimento de aplicativos Web usando
reatores. Web nativa .
Nachos uiA interface do usuário do Nachos suporta testes mais bonitos, de fios e de brincadeira. Esta biblioteca agradável e bem escrita fornece a todas as pessoas interessadas designs interessantes e um gerenciador de temas global.
8. Reagir a biblioteca nativa da interface do usuário
O trabalho no projeto
React Native UI Library é realizado no
Wix . É um conjunto ultramoderno de ferramentas para o desenvolvimento de interfaces com o usuário e uma biblioteca de componentes para o React Native. A React Native UI Library suporta, sem esforço adicional de programação,
react-native-animatable e
react -native-blur .
React Native UI LibraryEsta biblioteca inclui um conjunto de predefinições de estilos (entre eles - Cores, Tipografia, Sombras, Raio da borda e outros), que são traduzidos em modificadores.
Aqui está um exemplo usando a React Native UI Library.
9. Reagir papel nativo
A biblioteca de componentes de plataforma cruzada do
React Native Paper , com aproximadamente 1.500 estrelas no GitHub, segue as idéias de design de materiais do Google.
Reagir papel nativoEste conjunto de componentes suporta
temas globais . Se necessário, para se livrar dos módulos não utilizados deste conjunto, você pode usar o plug-in apropriado para o babel.
Aqui está um exemplo usando o React Native Paper.
10. Reagir ícones nativos do vetor
O projeto
React Native Vector Icons , que reuniu cerca de 10 mil estrelas no GitHub, é uma
extensa coleção de ícones personalizados para aplicativos React Native, adequados para uso em várias plataformas.
Reagir ícones nativos do vetorOs ícones do React Native Vector Icons são usados em milhares de aplicativos. É possível que eles sejam úteis para você.
11. Teaset
A biblioteca
Teaset , que coletou cerca de 1300 estrelas no GitHub, inclui mais de 20 componentes escritos em JS puro (ES6).
TeasetO projeto não pode se orgulhar de uma documentação rica, mas a simplicidade de seus componentes, focada em atender às necessidades básicas dos aplicativos React Native e sua boa aparência, sugerem que Teaset vale pelo menos uma olhada.
Sumário
No início deste material, falamos sobre o fato de o React Native estar atraindo cada vez mais atenção da comunidade de desenvolvedores devido à prevalência do React e à popularidade dos aplicativos móveis. Portanto, não é de surpreender que o número de desenvolvimentos decentes que implementam conjuntos de componentes ou ferramentas auxiliares para a criação de aplicativos baseados no React Native não possa ser limitado aos que examinamos acima. Se você está procurando algo semelhante para o aplicativo React Native, aqui estão mais alguns projetos que merecem atenção:
Caros leitores! Se você estiver desenvolvendo aplicativos móveis com base no React Native, informe-nos quais conjuntos de componentes e ferramentas auxiliares você usa para isso.
