No React Native, podemos usar componentes para encurtar nosso código e dividi-lo em pequenos componentes que são chamados posteriormente no App.js(ou App.tsx se estiver utilizando typeScript). No artigo de hoje iremos relembrar o que são componentes no React Native e seu uso numa aplicação real.
Relembrando o que são Componentes
Os componentes no React Native incluem elementos fundamentais, como View, Text e Image, bem como componentes mais complexos, como ScrollView, ListView e FlatList. É possível criar seus próprios componentes personalizados para atender às necessidades específicas do aplicativo.
Os componentes no React Native são escritos em JavaScript e incorporam estilos CSS para definir a aparência e o layout dos elementos na tela. Esses estilos usam uma sintaxe semelhante ao CSS, mas com algumas diferenças importantes. Esse é também chamado JSX(uma maneira de estruturar a renderização de componentes usando a sintaxe familiar para muitos desenvolvedores comumente usados no React).
Aplicando componentes num projeto real -
Agora iremos ver o uso e criação de componentes na prática e como os códigos ficam muito mais curtos e organizados quando eles são utilizados. Para se ambientar, nós estamos criando uma aplicação onde as pessoas vão se reunir para jogar podendo o separar por várias "turmas". Iremos chamar essa aplicação de Teams:
Acima conseguimos ver todas as pastas que utilizaremos: Header,Groups e o arquivo App.tsx
Seguindo o estado atual da aplicação,ela não tem nada demais:
Nosso objetivo é colocar um Header em seu topo e que apareça em toda aplicação, vamos começar:
import styled from 'styled-components/native';
export const Container = styled.View`
width: 100%;
flex-direction: row;
align-items: center;
justify-content: center;
`;
export const Logo = styled.Image`
width: 46px;
height: 55px;
`;
Na pasta Header,criamos um arquivo style.ts
onde a estilização do componente vai ser mostrado. Fazemos uma exportação de uma variável que é aplicada na tela da aplicação contendo alinhamento de no seu centro e também seu tipo de estilização é baseada no View
Alerta importante: nesta aplicação, estamos fazendo uso passivo de styled-components, logo partes como estilização estarão com diversas importações desta biblioteca, assim como mostrado já no início do código.
E também exportamos outra variável que guarda a altura e largura do Header que será visualizado.
Feito isso, num arquivo index.tsx
nós iremos criar que irá importar essas configurações antes vistas e também a imagem de Header:
import { Container,Logo } from './style';
import logoImg from '@assets/logo.png'
export function Header(){
return(
<Container>
<Logo source={logoImg}/>
</Container>
)
}
Neste código conseguimos ver em ação um componente em ação, pois ele nada mais é que a importação de uma "peça de código" , vimos a importação das Const criadas no arquivo style.ts
sendo importadas. Dentro de Export function Header, em seu return temos ali <Container></Container>
que é um componente com aquelas configurações já criadas, e dentro dele temos o que é outro componente que puxa as configurações das consts criadas no arquivo .ts, mas percebemos algo interessante: dentro dele estamos chamando um source
que é de onde que pegaremos a imagem. Nessa hora, voltamos na parte de importações e vemos a importação dessa "logoImg" da pasta `assets, lá guardamos nossa imagem de header.
Concluíndo e entendendo o código acima, além de como foi separado os componentes podemos prosseguir, pois criamos o arquivo com o raciocínio do Header, mas ainda falta aplicar ele numa tela. Vejamos a seguir:
Entramos na pasta screens/ Groups(caso não tenha criado, crie a pasta screens e pasta Groups) e nela fazemos mais uma estilização de tela de fundo,que será toda a tela. Dentro da pasta Groups criamos uma style.ts
e um index.tsx
import styled from "styled-components/native";
export const Container = styled.View
flex: 1;
background-color: ${({ theme }) => theme.COLORS.GRAY_600};
align-items: center;
justify-content: center;
;
Feito isso, vamos para o arquivo index.tsx
e fazemos o seguinte:
`
import { Header } from '@components/Header';
import { Container } from './styles';
export function Groups() {
return(
);
}
`
No código acima, fizemos a importação via Path Mapping do componente anteriomente criado, Header. Também fazemos a importação do último container que acabamos de fazer no arquivo style.ts
.
Estamos próximos da finalização do artigo e também deste projeto. Agora basta importar o componente Groups
para o App.tsx:
`
import { StatusBar } from 'react-native';
import {ThemeProvider} from 'styled-components'
import { useFonts, Roboto_400Regular, Roboto_700Bold } from '@expo-google-fonts/roboto';
import { Groups } from '@screens/Groups';
import theme from './src/theme';
import { Loading } from '@components/Loading';
export default function App() {
const [fontsLoaded] = useFonts({ Roboto_400Regular,Roboto_700Bold });
return(
barStyle= "default"
backgroundColor= "transparent"
translucent
/>
{ fontsLoaded ? <Groups/> : <Loading/>}
</ThemeProvider>
);
}
`
Outras configurações estão dentro deste código, mas conseguimos criar um tipo raciocínio onde dentro ThemeProvider
, as fontes que estamos importando neste app irão aparecer junto da tela que guarda o componente Groups
, caso contrário outro componente que se chama Loading
entrará em ação e irá apresentar uma tela de carregamento. O resultado final, executando essa aplicação será:
Em resumo, os componentes no React Native são a base da construção de interfaces de usuário em aplicativos móveis. Eles fornecem uma maneira fácil de criar elementos personalizados e reutilizáveis que podem ser estilizados de forma dinâmica para fornecer uma experiência de usuário aprimorada. Com o React Native, os desenvolvedores podem criar aplicativos móveis nativos rapidamente e com mais facilidade, reduzindo o tempo e o custo de desenvolvimento.
Top comments (0)