Então, quais são as nossas alternativas ao fluxo de trabalho gerenciado?
Uma alternativa é usar a CLI do React Native, você
pode aprender sobre isso na página oficial do
React Native, se você o visitar, basta pesquisar no React Native para encontrá-lo e,
se você clicar em começar, será recebido com duas maneiras diferentes de começar e as formas pré-selecionadas de usar o
Expo CLI,
é a abordagem que usamos, certo?
Portanto, não há nada muito chique nisso, isso fornece um aplicativo React Native usando expo, é o
que usamos neste curso.
Você também pode clicar no início rápido do
React Native CLI e agora aqui, antes de tudo, você precisa configurar seu sistema de
uma certa maneira e depois instalar um pacote separado, o React Native CLI, que agora você precisa
para criar um projeto e executá-lo e assim por diante. Agora importante, aqui você encontrará instruções detalhadas de instalação para diferentes sistemas operacionais
e aplicativos que deseja criar.
Agora, esteja ciente de que no Windows, como diz aqui, você não pode criar aplicativos iOS, o mesmo no Linux,
você só pode criar aplicativos Android lá e encontrará instruções de instalação se selecionar as opções específicas.
No macOS, você
pode criar iOS e Android e também precisará seguir estas instruções de instalação.
Agora não vou fazer isso em detalhes aqui, porque você encontrará todos escritos aqui, é
claro, se quiser
acompanhar, no final, você precisará instalar alguns pacotes, não os pacotes npm, mas os pacotes em todo o sistema
e o O processo exato de instalação difere em qual plataforma você está executando.
Você precisará instalar o Android Studio ou Xcode, portanto, o Xcode para aplicativos iOS, o Android Studio para
aplicativos Android e você precisa instalá-lo agora,
antes era opcional,
eu fiz para obter um simulador, agora
você precisa, porque agora esses ferramentas serão usadas para criar seu aplicativo.
Anteriormente, isso não era necessário porque o invólucro da expo basicamente leu nosso código e o hospedou, e
você também pode criar um aplicativo independente com expo no fluxo de trabalho
gerenciado, o que acontecerá na nuvem.
Agora que tudo acontece localmente, você precisará instalar o Android Studio e assim por diante e
instalá-lo com todas as opções encontradas aqui.
Agora você também não importa em qual plataforma está trabalhando, também precisará instalar a CLI do React Native. Você pode fazer
isso no prompt de comando ou no terminal normal. No Mac ou Linux, talvez seja necessário adicionar o sudo na frente dele para obtenha as permissões corretas
e isso agora instalará globalmente a CLI do React Native, para isso você também precisará do NodeJS
instalado
porque ele usa o npm, que é o gerenciador de pacotes do nó, portanto, certifique-se
de que também o possui.
Agora, com a CLI do React
Native instalada, podemos começar a criar um projeto totalmente sem expo e, para isso, criarei um
projeto totalmente novo e selecionei uma pasta para isso executando
o init do native-react e agora qualquer nome de sua
escolha, por exemplo RNWithoutExpo. Para o nome, é importante que
seja escrito assim, sem traços ou sublinhados, mas apenas uma palavra.
Então RNWithoutExpo é o nome que eu escolherei e agora criará um novo projeto do React Native
usando a CLI do React Native neste local em que você executou esse comando e fornecerá a nova pasta que
contém esse novo projeto do React Native.
Agora importante novamente,
agora você precisa ter o Android Studio e o Xcode instalados e configurados conforme mencionado nos documentos
oficiais
aqui. Caso contrário, o que vou mostrar
agora não funcionará, você precisará instalá-lo porque agora essas ferramentas serão aproveitadas por a CLI
nativa do React para criar e executar seu aplicativo. Também gere alguns emuladores ou simuladores, que podem ser os mesmos
usados anteriormente no curso, mas você precisa deles para que possamos ver nosso aplicativo React Native em execução lá.
Então agora vamos aguardar que esta configuração termine aqui e, uma vez feito isso e esse processo possa demorar um pouco, você
pode seguir as instruções aqui para executar o aplicativo no final. Então, deixe-me navegar nesta pasta recém-criada aqui
e
executar o react-native run-ios, por exemplo,
para executá-lo no simulador do iOS que obtive. Agora, nos bastidores, o Xcode usa o Xcode para criar este
aplicativo,
ele não usa mais o expo, você pode desinstalar o cliente expo aqui, você pode desinstalar a CLI
do expo do
seu sistema, isso não aproveita o expo, apenas usa o Xcode por trás as cenas para criar seu
aplicativo, então esta ferramenta de desenvolvimento nativa da Apple. Então, vamos aguardar o término dessa compilação e, na primeira vez em que
a compilar, isso demorará
um pouco mais, pois as reconstruções subsequentes serão mais rápidas. Então, vamos esperar que isso termine.
Agora, durante todo esse processo de compilação, uma nova guia será aberta ou uma nova
janela no seu terminal, mantenha esse processo em execução e também mantenha o
processo de
compilação, é claro, não saia disso, portanto, mantenha esses processos em funcionamento aqui e em execução. agora isso instala o aplicativo
no simulador, neste caso, se você tivesse um dispositivo real conectado, ele o instalaria lá e lançaria o aplicativo
lá e, portanto, aqui, ele realmente
criou um novo simulador aqui para mim, não importa,
agora ele lança o aplicativo aqui neste simulador. Novamente para o primeiro lançamento, isso agora
faz o download do aplicativo incorporado neste dispositivo basicamente e você também tem alguns recursos de desenvolvimento interessantes, a depuração remota
pode ser ativada, então você também tem todos esses recursos interessantes aqui, isso
não é exclusivo da expo e este primeiro lançamento demorará um pouco mais, conforme mencionado.
Então, vamos esperar que esse download termine aqui, para que o aplicativo seja iniciado e aqui está chegando. Agora, a tela inicial exata que você está vendo
aqui, que pode diferir ao
longo do tempo, porque esse é apenas o código inicial que você obtém
no projeto, que veremos em um segundo, mas agora esse é o aplicativo, um aplicativo nativo sem
exposição caso contrário, o mesmo, executando no iOS. Também podemos executá-lo no Android e, para isso, esse processo que agora está concluído pode
ser limpo, o outro deve continuar em
execução, é o servidor de desenvolvimento que conversa com o dispositivo e que observa as alterações nos arquivos e envia um novo código
ao dispositivo. ,
então o que você sabe da expo, que funciona aqui também. Portanto, mantenha o outro processo em
execução, mas agora também podemos executar o react-native run-android para criar o aplicativo para Android e aproveitar o mesmo servidor
para criar e enviar o aplicativo Android para o emulador do Android e ver isso também.
Então, vamos esperar que isso
termine, novamente essa primeira compilação levará mais tempo, as recargas subsequentes serão muito mais rápidas.
Esse processo de compilação agora utiliza o Android Studio, que você também precisa
ter instalado e configurado conforme descrito nos documentos oficiais e, portanto, agora também funciona totalmente
sem expo, apenas usa o Android Studio.
Agora, isso também inicia o aplicativo Android aqui no meu emulador do Android, mas, como antes, esse lançamento inicial pode demorar um pouco, agora
está se conectando a este
servidor de desenvolvimento que, portanto, é claro que você também deve
continuar executando, não apenas enquanto constrói neste pacote, mas o tempo todo, para que, com as alterações nos
seus arquivos, você obtenha uma reconstrução ao vivo e, uma vez feito isso, vamos ver o aplicativo finalizado sendo
executado no Android.
Agora, vamos dar uma olhada no código que é
responsável por isso, agora parece totalmente diferente do que vimos até agora?
Para isso, carreguei o projeto aqui novamente com o Visual Studio Code, para que o mesmo configurado como antes
e o que você vê pareça um pouco diferente, mas principalmente, temos um monte de arquivos de configuração diferentes, justos
o suficiente, mas isso realmente não muda a maneira como escrevemos nosso código.
Muito importante: temos um Android e uma pasta iOS,
não tínhamos isso
antes, essas pastas e no Windows, a propósito, Linux você não tem iOS, você só tem
Android lá, mas essas pastas contêm o aplicativo nativo real projetos criados com a ajuda do Android
Studio e do Xcode e seu código é incorporado ao que você poderia
dizer, o React Native faz tudo isso para você, o processo da CLI do React Native, mas
se dermos uma olhada no código concreto no aplicativo. arquivo js, bem, isso é
exatamente o que usamos neste curso, certo? Lá, temos algumas importações e alguns links adicionais, que mostram alguns avisos aqui
sobre o estilo do código.
Esses não são erros reais, apenas que eu deveria usar aspas duplas em vez de
aspas simples; sim, alguma recomendação da qual não me importo aqui, mas se você der uma olhada
no que está sendo importado aqui, reaja, salve a visualização da área, a folha de estilo, a visualização de
rolagem , visualizar, texto - essas são todas as coisas com as quais já trabalhamos, por isso temos os
componentes normais com os quais já trabalhamos e, é claro, fazemos porque o que eu disse ao longo deste curso, React Native é React Native, expo é um invólucro fino em
torno dele .
Nós escrevemos o mesmo código, usamos os mesmos componentes, eles são compilados em widgets nativos, que nem mudam quando
usamos expo, a única diferença é
que, com expo, não precisamos configurar tanto, a compilação é um pouco
mais rápido e adicionar módulos nativos é super fácil, testar em dispositivos reais é super fácil, é simplesmente mais fácil,
criamos o aplicativo
da mesma maneira e isso é algo que você pode ver aqui também.
Os estilos são configurados da mesma maneira com a Folha de estilo. criar, é tudo o
que fizemos ao longo deste curso e isso é
importante para você.
Agora, uma coisa extra que você encontrará aqui é o índice. arquivo js, não tivemos
isso na expo, esse é o arquivo de configuração básica que inicia seu aplicativo, você pode dizer, que garante
que esse componente do aplicativo seja renderizado na tela, isso foi algo que
a expo fez por você no React Aplicativo de exposição nativo, mas, além disso, é realmente o mesmo e
você criaria um aplicativo da mesma maneira.