Aula 03
Template do Componente App e o Registro com o AppRegistry
Summary
Summary of Transcript
The speaker discusses the process of setting up a React Native app component. Here’s a breakdown of the steps:
-
Component Setup:
- The speaker creates a template for the app component by adding a
View
and duplicatingText
components for demonstration. - They emphasize the need to import these components from React Native.
- The speaker creates a template for the app component by adding a
-
Initializing the App:
- The speaker directs to the
index
file for both iOS and Android, starting with iOS. - They delete existing content to set up a fresh starting point for the application.
- Utilization of the
AppRegistry
from React Native is highlighted, which is required to register the app component.
- The speaker directs to the
-
Imports:
- They import
AppRegistry
and the newly createdApp
component, specifying the correct path to thesrc
directory.
- They import
-
Registering the Component:
- The
AppRegistry.registerComponent
method is used, where the project name is specified along with a function that returns the app component.
- The
-
Testing:
- After saving the changes, the speaker runs the iPhone simulator to check for errors. The output "oi, oi, oi, oi, oi" confirms that the app component is functioning correctly.
-
Android Setup:
- The speaker notes that the same code from the iOS index file will be copied into the Android index file (
index.android.js
) to ensure consistent functionality across platforms.
- The speaker notes that the same code from the iOS index file will be copied into the Android index file (
-
Final Note:
- The speaker asserts that application development can commence in the
src
folder, without concern for platform differences (Android vs iOS). They verify that everything is running smoothly on both the iOS and Android emulators.
- The speaker asserts that application development can commence in the
Overall, the transcript provides a step-by-step guide on configuring a foundational setup in React Native, covering component setup, registration, and initial testing on both iOS and Android platforms.
Video Transcript
Então vamos retornar o template para esse componente app.
O que eu vou fazer?
Eu vou adicionar um view, tá bom?
E dentro da view você tem uns componentes de texto e vou duplicar só para parecer alguma
coisa.
Então como a gente está usando view e text a gente tem que importar que são componentes
do React Native.
Import.
Vamos tirar de dentro do module do React Native, então precisa do curly braces aqui de estruturar
a view e o text from React Native.
Bom?
Então a gente já está ok, vamos salvar o componente e o que a gente vai fazer agora?
A gente vai para o index do Android iOS aqui, eu vou começar do iOS, vamos deletar tudo,
tá bom?
E vamos começar a iniciar o ponto de partida do aplicativo.
Primeiro a gente vai precisar do app registry que é parte do React Native.
React Native, tá bom?
Esse componente app registry vai servir para chamar a gente, vai chamar a função register
component que vai dar o ponto de partida para o aplicativo.
Note que a gente não precisa importar nada do React, só do React Native.
Então vai o app registry e agora a gente vai também precisar importar o app, então
vamos dar import do componente que a gente fez agora, do app, vamos chamar de app from,
onde é que está localizado?
Está dentro da pasta src que é ter que ter o ponto barra, porque está no diretório
presente.
Barra src, a app.
Então precisa da extensão do ponto js e assim.
E a gente vai chamar a app registry ponto register component, o nome do componente vai
ser o nome do projeto, nesse caso a autenticação com Firebase Redux, tá bom?
Eu criei o projeto com esse nome, então eu tenho que ir usá-lo.
E o segundo argumento vai ser uma função, vou dar a função de flash e vai retornar
o componente app, deixa eu aumentar a tela aqui, vai retornar esse cara aqui, então
só digitar app, tá bom?
Ponto em vírgula para finalizar.
Então esse componente app register que está dentro do React Native, vai registrar o componente
que é esse cara aqui, esse componente aqui, o app vai ser o ponto de partida do aplicativo,
tá bom?
Vamos salvar, só rodar aqui o meu simulador do iPhone para ver se não deu erro.
Então o ponto de partida está oi, oi, oi, oi, oi, que funcionou que é o componente
app, né?
Então tá tudo certo, quando a gente terminar esse cara vamos copiar todo o código aqui
e colar no mesmo coisa no Android, no index.android.js, vou remover tudo e vou colar a mesma coisa
do index.ios.js, porque vamos rodar tanto como no iOS, como no Android, então vai ser
o mesmo coisa.
E agora a gente pode começar a escrever a aplicação dentro dessa pasta src e não vai
importar se é Android ou iOS.
Só para demonstrar, vou pro meu amulador do Android, vou download, atualizei, está
posicionando também no Android.
Então tá tudo bem.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: