Usando React Native Elements, um kit de ferramentas de interface de usuário de plataforma cruzada

Kits de interface de usuário fornecem componentes de interface de usuário bonitos e prontos para uso que aceleram o desenvolvimento. Existem muitos kits de interface do usuário excelentes para o React Native. Um dos mais populares, com mais de 20.000 estrelas no GitHub , é React Native Elements .

Neste tutorial, examinaremos os fundamentos do uso do React Native Elements. Abordaremos o seguinte:

• O que é React Native Elements?
• Instalando o React Native Elements
• Personalização de componentes
• Tema
• Estendendo seu tema
• Componentes em elementos nativos do React

Você pode encontrar todos os exemplos de componentes deste artigo em meu GitHub .

O que são React Native Elements?

Os componentes no React Native Elements são como edifícios pré-fabricados. Por exemplo, o componente Button vem com um ícone personalizável e uma etiqueta incorporada. Tudo isso é possível graças ao pessoal fabuloso do React Native Elements, combinando bibliotecas populares de componentes de IU de código aberto, como React Native Vector Icons .

Instalando Elementos Nativos React

Se estiver usando o Expo, você só precisa instalar o React Native Elements e pronto:

 yarn add react-native-elements 

Ou, com npm:

 npm install react-native-elements 

Aplicativo nativo Bare-bones React:

 yarn add react-native-elements 

ou

 npm i react-native-elements--save 

Se você já instalou React Native Vector Icons e React Native Safe Area Context em seu projeto, você pode pular a próxima etapa. Caso contrário, execute o seguinte:

 yarn add react-native-vector-icons react-native-safe-area-context 

ou

 npm i--save react-native-vector-icons react-native-safe-area-context 

Personalização de componentes

Todos os componentes são agrupados em um , que pode ser controlado com o prop containerStyle . A maioria dos componentes fornece outros adereços de estilo personalizáveis, que permitem estilizar ainda mais os componentes (por exemplo, titleStyle ).

Composição

Vamos explorar esse conceito com um botão personalizado:

 import React from'react';
import {Button} de'react-native-elements'; export const CustomButton=(... props)=> ( 
);

O código acima produz o seguinte botão:

A cor do texto do título é estilizada com a prop titleStyle , a cor do botão é estilizada com a prop buttonStyle e o contêiner ( View ) é estilizado com o prop containerStyle .

Temas

O tema no React Native Elements foi projetado para permitir que você defina os adereços de todos os componentes em um só lugar, fornecendo uma aparência consistente no Android, iOS e na web.

Para aproveitar isso, você precisa configurar o ThemeProvider e fornecer um tema :

 import React from"react";
import {ThemeProvider, Button} de'react-native-elements'; tema const={ Botão: { containerStyle: { margem: 5, }, buttonStyle: { largura:"100%", borderRadius: 35, backgroundColor:"verde", }, titleStyle: { cor vermelha", }, },
}; export const App=()=> { Retorna (    );
};

O código acima produz o mesmo botão verde com texto em vermelho. Usando o objeto theme , agora podemos definir os adereços para todos os componentes do React Native Elements em um só lugar.

Estendendo seu tema

Digamos que você queira estender ou substituir os adereços definidos em theme ? É assim que você faz isso.

Ordem de estilo

Os componentes no React Native Elements seguem uma ordem de estilo:

1. Interno, que são configurações padrão aplicadas ao componente,
2. Tema, que é definido pelo objeto theme e aplicado em segundo lugar,
3. Externo, que é definido localmente usando os adereços de componente fornecidos (por exemplo, )

Forma do objeto

Os estilos externos são aplicados por último e substituem os estilos que você define com o seu objeto de tema. A forma do seu estilo definido localmente deve corresponder ao que você definiu em theme :

//forma de containerStyle: [{}]
tema const={ Botão: { buttonStyle: [ { backgroundColor:"verde", } ] }
}
//Isso funciona: [{}]

//Isso não funciona-{}

peculiaridades temáticas

Devido à ordem de estilo, existem algumas peculiaridades a serem observadas. Por exemplo, o componente Button tem um type prop que aceita três valores de string: outline , clear e sólido :

Quando você define o type prop como "outline" ou "clear", ele define o plano de fundo do buttonStyle prop para "transparente".

Se você alterar a cor de fundo do buttonStyle com o seu objeto de tema, o prop type é quebrado. Isso ocorre porque o estilo interno (padrão) é substituído pela nova cor definida no objeto de tema ( theme ). Como sabemos por que ele quebra, podemos refab nosso componente pré-fabricado.

 const theme={ Botão: { buttonStyle: { backgroundColor:"laranja", }, },
};
//isso não funciona

//Isso funciona

Componentes nos elementos nativos do React

De um simples a um componente animado, o React Native Elements visa fornecer componentes para os casos de uso mais comuns.

Cansado do componente botão? Vamos explorar o que mais o React Native Elements tem a oferecer.

Text

O componente Texto tem cinco adereços de estilo. Você configura o estilo básico do componente Texto com o prop style . Cada outra proposta de estilo tem uma proposta booleana correspondente que permite selecionar o estilo desejado para o texto renderizado:

1. h1Style –h1
2. h2Style –h2
3. h3Style –h3
4. h4Style – h4 h1 Componente de texto
   Componente de texto h2
   componente de texto h3
   h4 Componente de texto
   

Cada prop h [X] Style possui seu próprio fontSize e herda o restante de seus estilos do prop style .

No exemplo abaixo, h3Style não tem uma configuração de cor, então herda o verde da proposta style :

 const theme={ Texto: { estilo: { fontSize: 14, cor verde", }, h1Style: { cor preta", }, h2Style: { cor azul", }, h3Style: { fontSize: 15, }, },
};  Estilo básico   componente de texto h1   componente de texto h2   componente de texto h3 

Icon

React Native Vector Icons está configurado para você e pronto usar, eliminando todo o trabalho de configuração de ícones. Ele usa o ícone Material definido por padrão, então a única proposta necessária é o nome . E como todos os componentes do React Native Elements, é totalmente personalizável.

Se desejar usar um dos outros conjuntos de ícones, você pode defini-lo com o prop type , como eu fiz abaixo para o ícone de abelha ( type="entypo" name="swarm"):

Ele também tem alguns adereços convenientes, incluindo:

• gerado , que define uma borda de caixa ao redor do contêiner do componente, e
• reverse , que inverte a cor do logotipo e a cor de fundo do contêiner do componente.
• onPress , que torna o botão pressionável do componente de ícone//Primeira linha//Segunda linha//Terceira linha//Quarta linha//exemplo OnPress
  console.log (“clicado”)}
  />
  

Card

O componente é um componente composto com todos os componentes filhos de que você precisa para criar um cartão elegante em questão de minutos:

• Card.Divider recebe todos os Divider adereços,
• Card.Title recebe todos os adereços de Texto ,
• Card.Image recebe todas as Imagem adereços,
• Card.FeaturedTitle recebe todos os adereços de Texto , e
• Card.FeaturedSubtitle recebe todos os adereços de Texto

Abaixo está um exemplo de como usar o componente Cartão em React Native Elements:

 import React from"react";
import {Button, Card, Icon, Text} de"react-native-elements";
const urlImage= "https://images.unsplash.com/photo-1595526114035-0d45ed16cfbf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750"
export const CustomCard=()=> (   Não é meu quarto     Mas é um quarto lindo, digno de uma breve descrição... no espaço de descrição! & # x1f60e;  } title="MORE INFO"/> 
);

Viu como foi fácil? Levei mais tempo para escolher a imagem do que para escrever o código.

O icon prop disponível para o componente já está configurado para nós. Tudo o que precisamos fazer é adicionar o componente .

Além disso, observe que o componente

está usando o raio da borda que definimos anteriormente no objeto do tema. Você não pode deixar de amar a simplicidade e facilidade de React Native Elements!

Classificação

O componente Rating é importado de react-native-ratings e agrupado em React Native Elements’ withTheme HOC. Isso permite que você estilize o componente com seu objeto theme , como faria com qualquer outro componente React Native Elements.

Você tem dois componentes de classificação disponíveis:

1. Classificação do estilo Airbnb com gesto de toque (dois primeiros)
2. Versão extravagante de deslizar (dois inferiores)

 import React from"react";
import {Alert, View, StyleSheet} de"react-native";
importar {AirbnbRating, Rating} de"react-native-elements";
função padrão de exportação RatingsExample () { function setRating (rating: number) { Alert.alert ("Avaliação é:"+ avaliação); } Retorna (       );
}
estilos const=StyleSheet.create ({ container: { flex: 1, alignItems:"center", justifyContent:"center", },
});

Se estiver usando TypeScript, você receberá um erro para reviewColor=""; o adereço está disponível, mas não foi declarado. Você pode ignorar esse erro com segurança, mas se quiser que o TypeScript pare de gritar com você, veja como calar a boca:

1. Crie um arquivo na pasta do seu projeto chamado react-native-elements.d.ts
2. Adicione o seguinte código:

 declare o módulo"react-native-elements"{interface de exportação do AirbnbRatingProps {
reviewColor ?: string;
}
} 

Input

O componente Input funciona como o componente de entrada React Native padrão, exceto que vem com todos os recursos que você precisa para criar uma entrada atraente. Como você pode imaginar, é totalmente personalizável.

 import React from"react";
import {View, StyleSheet} de"react-native";
import {Input, Icon} from"react-native-elements";
export const InputExample=()=> (  } errorMessage="Eu apareço quando algo dá errado" />  
);
estilos const=StyleSheet.create ({ container: { flex: 1, alignItems:"center", justifyContent:"center", },
});

Conclusão

O React Native Elements tem muitos outros componentes para casos de uso comuns e eles seguem os mesmos padrões que exploramos neste artigo. Se você quiser revisar os outros componentes e acessórios de estilo diferentes em mais detalhes, consulte React Native Elements Playground . Você pode explorar e ajustar componentes e até mesmo gerar código pronto para produção.

Se quiser criar um tema para seus próprios componentes, você pode usar o withTheme HOC:

 import React from"react";
import {Text} de"react-native";
import {withTheme} de"react-native-elements";
const CustomComponent=(props)=> (  Este é um componente personalizado com tema! & # x1f603; 
);
exportação padrão com Theme (CustomComponent);

React Native Elements é um ótimo kit de ferramentas de interface do usuário. Se você quiser que seu projeto comece a funcionar rapidamente, não há como errar.

A postagem Usando React Native Elements, um kit de ferramentas de interface do usuário de plataforma cruzada apareceu primeiro no LogRocket Blog .

Source link