Componentes

● O código criado no arquivo App.js um novo

componente
● Ao criar um app React Native, criamos vários novos
componentes
● Tudo o que é apresentado nas telas são
componentes
● Os componentes podem ser básicos
● Precisam de uma função de renderização para
mostrar conteúdo na tela
Componentes
Aninhar
componentes
Props
● Propriedades
● Os componentes podem ser personalizada quando
são criados
● Podemos utilizar parâmetros diferentes nos
componentes
● Esses parâmetros de criação são chamados de props
Props
● Exemplo no componente image, podemos usar a prop
source para mostrar o local de onde virá a imagem
● Nossos próprios componentes podem utilizar suas
props
● Isto permite que o componente possa ser reutilizado
● As propriedades são definidas pela classe “pai” e
permanecem fixas durante o tempo de vida do
componente
Props
Props
State
● Para controlar um componente podemos também
utilizar o seu estado
● Caso seja necessário mudar algum tipo de dados
podemos alterar o seu estado
● Para inicializar um estado fazemos isso dentro do
construtor da classe
● Para mudar um estado usamos o método setState
State
State
● É possível definir os estados de um componente
quando se obtém um novo dado de um servidor ou
após o preenchimento de uma campo do app
● É possível também modificar um estado por meio
de containers como Redux or Mobx – sem precisar
utilizar o método setState
Style
● É possível criar um padrão de estilo para o aplicativo,
utilizando o Style
● O Style corresponde ao arquivo CSS das páginas Web
● A propriedade de estilo pode ser um objeto simples
ou pode ser passado por meio de uma array de
estilos
● Neste caso, o último estilo definido é o que
permanec
Style
JSX
JavaScript XML
● Uma sintaxe que permite escrever elementos

dentro de JavaScript na forma de um XML

● Exemplo:

<Text>Meu nome é {nome}!</Text>

● Por ser JavaScript podemos usar variáveis dentro
do código
● No exemplo acima usamos a variável nome,
declarada antes deste código
JSX
● JSX compila em chamadas para o React.createElement
● Assim, a biblioteca React deve estar sempre no escopo
do código em JSX
Import React from ‘react’;
● Expressões JavaScript funcionarão entre chaves dentro
do JSX
<Text>
Hello, I am {getFullName("Rum", "Tum", "Tugger")}!
</Text>
JSX
Componente VIEW
● O componente mais fundamental para a construção
de uma IU
● Contêiner que suporta layout com flexbox, estilo,
manuseio de toque e controles de acessibilidade
● Ele faz um mapeamento para a VIEW nativa da
plataforma onde o React Native esteja executando
● Uma VIEW pode ser aninhada dentro de outras
VIEWs
Componente
VIEW
Componente TEXT
● Componente para exibir texto
● Suporta aninhamento, estilo e manipulação de toque
Componente
TEXT
Componente IMAGE
● Componente para exibir diferentes tipos de imagens
● Inclui imagens de rede, recursos estáticos, imagens
locais temporárias e imagens do disco local, rolo da
câmera, etc
Componente
IMAGE
Componente TEXTIMPUT
● Componente que permite inserir texto
● Tem uma prop onChangeText que chamada uma
função toda vez que o texto é alterado
● Tem uma prop onSubmitEditing que chama uma
função quando o texto é enviado
Componente
TEXTIMPUT
Componente SCROLLVIEW
● Contêiner de rolagem genérico
● Pode conter vários componentes e visualizações
● Os itens dentro do ScrollView podem ser
heterogêneos
● Possível rolar de forma vertical e horizontalmente
Componente
SCROLLVIEW
https://recode.org.br