As bibliotecas de componentes são uma coleção de código personalizável e reutilizável que pode ser feito para se adequar ao padrão de design de um aplicativo específico. Eles ajudam a manter um design consistente em todas as plataformas e aceleram o processo de desenvolvimento.
Aqui você aprenderá como usar a biblioteca de componentes React Native Elements ao criar seu próximo aplicativo React Native.
O que é React Native Elements?
O React Native Elements (RNE) é um esforço de código aberto dos desenvolvedores do React Native para criar uma biblioteca de componentes que pode ser útil ao criar aplicativos para Android, iOS e web. Ao contrário de muitos outras bibliotecas de componentes React Native, o RNE oferece suporte à sintaxe do TypeScript.
A biblioteca consiste em mais de 30 componentes que se concentram na estrutura do componente.
Instalando elementos nativos reativos com o React Native CLI
As instruções a seguir são para instalar o React Native Elements em um projeto criado usando o React Native cli.
Instale o React Native Elements em seu aplicativo React Native simples executando:
npm instalar @rneui/themed @rneui/base
Você também deve instalar react-native-vector-icons e safe-area-context:
npm instalar reagir-nativo-vector-icons reagem-nativo-seguro-área-contexto
Como instalar o React Native Elements em um projeto Expo
Para instalar o React Native Elements em um exposição projeto, instale o pacote e react-native-safe-area-context:
adição de fios @rneui/themed @rneui/base react-nativo-safe-area-context
Mantenha um gerenciador de pacotes como npm ou yarn durante a instalação de pacotes para evitar o risco de conflitos de dependência.
Projetos construídos usando o expo cli têm ícones de vetores nativos de reação instalados por padrão, então você não precisa instalá-lo.
Estilizando componentes de elementos nativos de reação única
Todos os componentes disponíveis por meio do RNE usam vários acessórios para estilizar o componente e o contêiner do componente.
O container do componente é um básico tag envolvendo uma tag de componente, como o. O tag é invencível em torno do componente e leva um containerStyle prop para aplicar estilos de exibição.
Um componente pode receber props de estilo padrão como cor, tipo, e tamanho. Um componente também pode receber um suporte de estilo personalizado exclusivo para lidar com os estilos do componente.
Todos esses são estilos externos para o componente.
Por exemplo, estilizar o Botão componente:
importar { Visualizar } de "reagir nativo";
importar { Botão } de "@rneui/temático";
const MeuComponente = () => {
retornar (
<Visualizar>
<Botão
buttonStyle={{ backgroundColor: "cinza" }}
containerStyle={{ largura: 150 }}
>
Botão Sólido
</Button>
<Botão
tipo="contorno"
containerStyle={{ largura: 150, margem: 10 }}
titulo="Botão Contorno"
/>
</View>
);
}
O código acima mostra como você pode aplicar estilos a um componente Button. Um botão usa um padrão tipo prop, e o outro usa o custom estilo do botão suporte. Ambos os botões também usam o containerStyle prop para adicionar estilos de exibição.
Criando temas para componentes do React Native Elements
A criação de temas para componentes RNE é útil quando você deseja aplicar um estilo a cada instância desses componentes. Com os temas, personalizar seus componentes para se adequar ao padrão de design desejado torna-se uma tarefa fácil.
O RNE fornece um criarTema() função para estilizar componentes. Esta função manterá os estilos de tema que substituem os estilos internos ou padrão de cada componente.
Para criar um tema, chame criarTema() e passe os estilos de tema desejados como um argumento de função:
importar { ThemeProvider, createTheme } de '@rneui/themed';
const tema = criarTema({
componentes: {
Botão: {
estilo do recipiente: {
margem: 10,
},
tituloEstilo: {
cor: "preto",
},
},
},
});
O ThemeProvider aplicará estilos a qualquer componente agrupado dentro dele.
O provedor aceita um tema prop que está definido para o tema criado acima:
<ThemeProvider tema={tema}>
<Título do botão="Botão temático" />
</ThemeProvider>
<Título do botão="Botão normal" />
Os estilos de tema substituem os estilos de componentes internos ou padrão, mas não substituirão um estilo de componente externo.
A ordem de precedência do RNE coloca os estilos externos no topo da hierarquia.
Exemplo:
// Tema
const tema = criarTema({
componentes: {
Botão: {
estilo do recipiente: {
margem: 10,
cor de fundo: "vermelho",
},
},
},
});
//Component
<ThemeProvider tema={tema}>
<Título do botão="Botão temático" cor={"secundário"}/>
</ThemeProvider>
No código acima, a cor de fundo do Botão componente será secundário, que é uma cor verde em oposição ao estilo do tema de vermelho.
A tema O objeto é enviado com o RNE, fornecendo vários valores de cores padrão prontos para uso. O RNE oferece várias opções como o ThemeConsumer componente, useTheme() gancho, e makeStyles() gerador de gancho para acessar o tema objeto.
O ThemeConsumer component envolverá seus componentes renderizados com uma função anônima. Esta função anônima leva tema como prop.
Você pode acessar os valores do tema com um estilo suporte:
importar Reagir de 'reagir';
importar { Botão } de 'reagir-nativo';
importar { ThemeConsumer } de '@rneui/themed';
const MeuComponente = () => (
<ThemeConsumer>
{({ tema }) => (
<Título do botão="ThemeConsumer" estilo={{ cor: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternativamente, você pode usar o useTheme() gancho para acessar o tema dentro de um componente.
Por exemplo:
importar Reagir de 'reagir';
importar { Botão } de 'reagir-nativo';
importar { useTheme } de '@rneui/themed';const MeuComponente = () => {
const { tema } = useTheme();
retornar (
<Ver estilo={styles.container}>
<Título do botão="useTheme" estilo={{ cor: theme.colors.primary }}/>
</View>
);
};
O makeStyles() gerador de gancho é semelhante ao uso de uma folha de estilo para definir estilos. Assim como a folha de estilo, ela separa qualquer estilo de fora do componente renderizado. referenciando o tema objeto dentro de um suporte de estilo de componentes.
Estendendo temas com TypeScript
O RNE oferece suporte a declarações TypeScript em seu aplicativo, permitindo que os desenvolvedores aproveitem os benefícios de usar a linguagem TypeScript.
Com TypeScripts fusão de declaração, você pode estender as definições de tema para adicionar cores e acessórios personalizados para os componentes padrão e personalizados do RNE.
Para estender as cores dentro do objeto de tema, você criará um TypeScript.ts arquivar e declarar o módulo @rneui/themed dentro do arquivo.
Você pode adicionar suas cores personalizadas e especificar o tipo esperado:
// **TypeScript.ts**importar '@rneui/themed';
declarar módulo '@rneui/temática' {
exportar interfacecores{
luz primária: string;
luz secundária: string;
}
}
Com este módulo, você pode passar suas cores personalizadas como valores ao criar um tema:
const tema = criarTema({
cores: {
luz primária: "",
luz secundária: ""
},
})
Agora as cores personalizadas fazem parte do seu objeto de tema e podem ser acessadas usando ThemeProvider, ThemeConsumer, ou o useTheme() gancho.
Componentes RNE vs. Componentes nativos de reação
Bibliotecas de componentes como React Native Elements são uma ótima maneira de colocar um aplicativo em funcionamento rapidamente. Eles mantêm seu foco na estrutura do aplicativo e não nos detalhes do design. O uso de componentes RNE sobre componentes React Native deve ser guiado principalmente pelo foco de seu aplicativo e quanto tempo de desenvolvimento você tem.
