Comparando bibliotecas de IU do React Native

O React Native é usado para construir aplicativos móveis de plataforma cruzada usando JavaScript e React. Desde seu lançamento inicial em 2015, a biblioteca cresceu e hoje é amplamente adotada pela comunidade de desenvolvedores móveis.

Na verdade, a comunidade tem sido uma grande parte do sucesso do React Native. Parece que todos os dias alguém lança uma nova biblioteca que torna a construção de aplicativos com React Native muito mais fácil.

Neste guia, compararemos 10 das bibliotecas de IU mais usadas para React Native:

1. componentes estilizados
2. React Native Extended StyleSheet
3. React elementos nativos
4. React Native Paper
5. React Native Credit Card Input
6. React nativo Gifted Chat
7. react-native-animatable
8. React Native Lottie
9. Reagir ícones vetoriais nativos
10. React Native SVG

1. componentes estilizados

componentes estilizados permitem que você escrever CSS como componentes React , que permite estilo dinâmico e prefixação automática. Ele também oferece suporte ao React Native.

No React Native, você normalmente escreveria estilos como objetos JavaScript. No entanto, escrever estilos como componentes permite que você escreva código legível e componentes reutilizáveis ​​e use seus estilos várias vezes, o que significa menos código.

Por exemplo, você pode usar o objeto de estilo clássico, como abaixo:

 import {StyleSheet, Text, View} de'react-native'
função padrão de exportação App () { Retorna (    Cabeçalho     Lorem ipsum dolor sit amet consectetur adipisicing elit.    ) }

Mas com componentes estilizados, você pode tornar o código mais legível e consistente:

 importar {StatusBar} de'expo-status-bar'
importar React de'react'
import {StyleSheet, Text, View} de'react-native'
importar estilizado de'styled-components/native' const CardContainer=styled.View` cor de fundo: # b34180; altura: 200px; raio da borda: 10px; largura: 150px;
`
const CardHeader=styled.View` preenchimento: 2px; alinhamento de texto: centro;
`
const CardTitle=styled.Text` tamanho da fonte: 20px; alinhamento de texto: centro; cor: #fff;
` const CardBody=styled.View` preenchimento: 2px; alinhar-itens: centro; display: flex;
`
const CardDescription=styled.Text` tamanho da fonte: 14px; cor: #fff; alinhamento de texto: centro;
` função padrão de exportação App () { Retorna (  {/* componente estilizado */}    Cabeçalho 2     Lorem ipsum dolor sit amet consectetur adipisicing elit.     )
}

Você pode ver a principal diferença entre os dois exemplos em termos de legibilidade do código e consistência do componente.

Os resultados ainda serão os mesmos na IU:

Outro motivo para usar componentes estilizados é que ele permite que você use a sintaxe CSS com a qual já se sente confortável, caso venha do mundo do CSS.

2. React Native Extended StyleSheet

Esta é uma das minhas ferramentas favoritas para estilizar no React Native. Embora semelhante à abstração React Native StyleSheet que vem com o React Native, React Native Extended StyleSheet oferece vantagens extras, como consultas de mídia, variáveis, estilos dinâmicos e temas. Usar o React Native Extended StyleSheet permite que você torne a IU responsiva em vários dispositivos.

Em geral, o React Native Extended StyleSheet é usado da mesma forma que o React Native StyleSheet. Abaixo está um exemplo prático de como usar variáveis ​​e consultas de mídia ao mesmo tempo com React Native StyleSheet .

Primeiro, defina as variáveis ​​globais com o método EStyleSheet.build () . Normalmente, você faria este código no arquivo de entrada principal App.jsx :

 EStyleSheet.build ({ /* Smartphones (retrato e paisagem)-----------*/ $ primário:'# 301551', $ verde:"verde", $ white:'# fff', $ black:"# 000", $ cinza:"# ccc" });

A seguir, obtenha o valor de qualquer variável usando EStyleSheet.value ('variableName') :

 const styles=EStyleSheet.create ({ container: { backgroundColor: EStyleSheet.value ('$ primary'), },
});

Aqui está o exemplo completo:

/** * Amostra de aplicativo nativo React * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React from'react';
import { SafeAreaView, StyleSheet, ScrollView, Visualizar, Texto, Barra de status,
} de'react-native'; importar EStyleSheet de'react-native-extended-stylesheet';
//Este arquivo é para um agrupamento reutilizável de itens do Tema.
//Semelhante a um layout de fragmento XML no Android EStyleSheet.build ({ /* Smartphones (retrato e paisagem)-----------*/ $ primário:'# 301551', $ verde:"verde", $ white:'# fff', $ black:"# 000", $ cinza:"# ccc" }); App const: ()=> React $ Node=()=> { Retorna ( <>      EStyleSheet      );
}; estilos const=EStyleSheet.create ({ container: { largura:'100%', backgroundColor: EStyleSheet.value ('$ primary'), altura:'100%', /** IPad */ '@media (min-width: 768px) and (max-width: 1024px)': { backgroundColor:'# ed8a0a', }, },
}); exportar aplicativo padrão;

Acima, alteramos o backgroundColor quando o aplicativo é acessado em um iPad:

3. Reaja elementos nativos

No amplo mundo do desenvolvimento da web, existem muitas bibliotecas de IU, como Bootstrap e MaterialUI, que evitam o incômodo de escrever a sua própria do zero. Você pode aproveitar os benefícios de um design responsável e melhorar o suporte em todos os navegadores.

React Native Elements é minha biblioteca de IU favorita para React Native porque é simples de usar, tem ótima documentação e suporte superior em iOS e Android.

Aqui está um exemplo de como usar React Native Elements:

 @copyrights https://reactnativeelements.com/docs/tooltip import {Tooltip, Text} de'react-native-elements'; ...  Informações aqui }>  Pressione-me 

4. React Native Paper

React Native Paper é bastante semelhante ao React Native Elements. A principal diferença é que o React Native Paper usa a IU do Material Design como base de seus componentes da IU. Se você é fã do sistema de design de IU de material, o React Native Paper é a biblioteca de IU para você.

Ao usar o React Native Paper, você provavelmente usará o tema com bastante frequência. O tema permite que você integre seu próprio sistema de design personalizado que pode ser combinado com o design da biblioteca. Por exemplo, você pode integrar seu próprio esquema de cores, tipografia, etc.

Usar o recurso de tema no React Native é simples: basta envolver seu aplicativo com PaperProvider e passar seu objeto de tema para ele:

 import {DefaultTheme, Provider as PaperProvider} de'react-native-paper';
importar casa de'/home' tema const={ cores: { primário:'# 90eee1', sotaque:'# 6356e5', }, fontes: { regular: 16, pequeno: 12, }, tipografia:{ título:'Roboto', parágrafo:'Open Sans' }
}; função padrão de exportação App () { Retorna ( );
} 

Agora você pode acessar os valores do tema em qualquer lugar em seu aplicativo e desfrutar de um sistema de design consistente. Para acessar o tema em qualquer componente, você deve envolvê-lo usando o componente de ordem superior withTheme :

 import {View, Text} de'react-native'
import {withTheme} de'react-native-paper'; const CardTitle=({theme})=> { Retorna ( Título 3 )
} exportar padrão com Theme (CardTitle)

Criar formulários pode ser complicado para desenvolvedores de celular. As bibliotecas de IU que exploraremos aqui podem ajudá-lo a economizar tempo e evitar problemas comuns relacionados ao teclado, como visualizações de IU que não respondem quando o usuário está digitando.

5. React Native Credit Card Input

React Native Credit Card Input é super fácil de usar. Ele tem uma bela IU e animação envolvente e produz uma ótima experiência do usuário, facilitando a inserção de informações de cartão de crédito.

Abaixo está um exemplo simples de como usar o React Native Credit Card Input:

 import React from'react';
import { SafeAreaView, StyleSheet, ScrollView, Visualizar, Texto, Barra de status,
} de'react-native';
import { CreditCardInput, } de'react-native-credit-card-input'; App const: ()=> React $ Node=()=> { const _onChange=(e)=> { /** * * * {"status": {"cvc":"incompleto","expiração":"incompleto","número":"inválido"},"válido": falso,"valores": {"cvc":"","expiry":"","number":"8","type": undefined}} */ console.log (e.values.number); console.log (e.válido); console.log (e.values.cvc); console.log (e.values.expiry); }; Retorna ( <>        );
};

O React Native Credit Card Input torna a inserção das informações de pagamento mais intuitiva. Ele tem um recurso de preenchimento automático e lida com a validação do número do cartão de crédito, então você não precisa escrever nenhum código extra para limpar a entrada. A entrada de cartão de crédito nativo do React também vem com um estilo personalizado, que permite que você integre seu próprio estilo e ícones.

A maior vantagem de usar o React Native Credit Card Input é que ele é um componente React puro, então você não precisa fazer nenhum link, o que não é o caso ao usar react-native-awesome-card-io , uma ferramenta semelhante.

6. React Native Gifted Chat

Se você deseja adicionar um bate-papo ao seu aplicativo React Native, react-native-gifted-chat é uma biblioteca incrível que permite criar uma caixa de bate-papo da IU em algumas etapas simples. A biblioteca oferece suporte para iOS, Android e web.

react-native-gifted-chat não requer nenhum link porque não contém nenhum código nativo. Você pode simplesmente instalar o pacote usando Yarn ou npm:

 yarn add react-native-gifted-chat

Aqui está um exemplo de como começar a usar o componente Box UI:

 # copyright https://github.com/FaridSafi/react-native-gifted-chat
importar {GiftedChat} de'react-native-gifted-chat';
import React, {useCallback, useState} de'react'; App const: ()=> React $ Node=()=> { const [mensagens, setMessages]=React.useState ([]); React.useEffect (()=> { setMessages ([ { _id: 1, texto:'Olá desenvolvedor', criado em: nova data (), do utilizador: { _id: 2, nome:'React Native', avatar:'https://placeimg.com/140/140/any', }, }, ]); }, []); const onSend=useCallback ((messages=[])=> { setMessages ((previousMessages)=> GiftedChat.append (previousMessages, messages), ); }, []); Retorna ( <>    onSend (mensagens)} usuário={{ _id: 1, }} />   );
};

7. react-native-animatable

r eact-native-animatable permite que você adicione transições e animações à IU no React Native. Ele tem um componente API declarativo, que você pode usar como um wrapper para o componente que deseja animar ou adicionar uma transição a ele. O melhor de tudo é que é personalizável para que você possa controlar a duração, o atraso e a direção da transição.

Abaixo está um exemplo de uma transição simples:

 import React from'react';
import { SafeAreaView, StyleSheet, ScrollView, Visualizar, Texto, Barra de status, TouchableHighlight,
} de'react-native'; import * as Animatable de'react-native-animatable'; App const: ()=> React $ Node=()=> { const phoneRef=React.useRef (null); Retorna ( <>     {/*  */} {/*  */}    SlideInDown       SlideInLeft       Quicar        );
};

8. Reaja Native Lottie

Lottie é uma biblioteca desenvolvida pela Airbnb que converte animações Adobe After Effect. Suporta iOS, Android e a web.

No React Native react-native-lottie permite para usar animações Lottie, fornecendo uma API de invólucro de componente. Ele pode ser instalado da mesma forma que qualquer biblioteca React Native. Você pode importar LottieView como um componente e passar o caminho do arquivo de animação.

Você pode obter animações Lottie em LottieFiles .

Aqui está um exemplo de como usar Lottie no React Native:

 importar LottieView de'lottie-react-native'; 

9. React Native Vector Icons

I cons em aplicativos para celular servem a um propósito semelhante ao dos sinais na estrada: você não pode navegar sem eles. Simplificando, os ícones ajudam os usuários a entender como interagir com seu aplicativo.

Eu recomendo usar react-native-vector-icons porque:

• Possui suporte multiplataforma (iOS, Android, web, Windows, etc.)
• Ele vem com bibliotecas de ícones populares, como FontAwesome e MaterialIcons
• Super fácil de usar e personalizável

Aqui está um exemplo de como usar react-native-vector-icons :

 import React from'react';
import { SafeAreaView, StyleSheet, ScrollView, TouchableOpacity, Visualizar, Texto, Barra de status,
} de'react-native';
importar ícone de'react-native-vector-icons/FontAwesome';
const myIcon=; App const: ()=> React $ Node=()=> { Retorna ( <>       Clique aqui      );
};

10. React Native SVG

Scalable Vector Graphics (SVG) é uma linguagem de marcação baseada em XML para descrever gráficos vetoriais bidimensionais. Os arquivos SVG são projetados para serem renderizados de forma limpa em qualquer tamanho e com outros padrões populares da web, como JavaScript, CSS, DOM e SMIL. De acordo com MDN , “SVG é, essencialmente, para gráficos o que HTML é para texto. ”

SVG não é compatível por padrão no React Native. react-native-svg permite que você renderize SVG em React Native no iOS e Android.

A instalação é muito simples. Com Yarn , basta executar a seguinte linha de comando:

 yarn add react-native-svg

A seguir, instale pods para iOS com cocoapods . Em seu terminal, navegue até a pasta ios :

 cd ios

Em seguida, execute:

 pod install

Se estiver usando uma versão antiga do React Native (0.60 ou anterior), você terá que vincular o pacote manualmente executando a seguinte linha de comando:

link

 react-native react-native-svg

Existem duas maneiras de usar r eac-native-svg . Você pode incluir seu SVG como um arquivo, conforme mostrado abaixo:

 importar {SvgXml} de'react-native-svg';
importar SVGImage de'./images/undraw_happy_2021_h01d.svg';
App const: ()=> React $ Node=()=> { Retorna ( <>         );
};

Ou você pode usá-lo como um componente, assim:

 # @ copyrights https://github.com/react-native-svg/react-native-svg

Conclusão

Agora você deve ter todas as informações básicas de que precisa para escolher o conjunto certo de bibliotecas de IU para seu próximo projeto React Native. É importante notar, no entanto, que o ecossistema React Native é enorme e está ficando cada vez maior à medida que a comunidade cria ferramenta após ferramenta para tornar a experiência do desenvolvedor ainda melhor.

Para ver o que mais o ecossistema React Native tem a oferecer, junte-se à comunidade de código aberto Awesome React Native .

A postagem Comparando as bibliotecas de IU nativas do React apareceu primeiro em LogRocket Blog .

Source link