Agora, além de configurar um novo projeto do zero com a React Native CLI ou com a expo CLI
e, em seguida, escolher o fluxo
de trabalho simples, você pode até converter um projeto gerenciado em um projeto de fluxo de trabalho simples do React Native e isso é muito legal,
porque isso significa que você pode obter tudo os recursos de conveniência do
fluxo de trabalho gerenciado durante o desenvolvimento e quando terminar, por exemplo, ou quando precisar de um determinado pacote de terceiros que integre
algum recurso que você não incorporou à expo e absolutamente necessário, nesse caso, você pode ainda mude
e você não precisará recriar o aplicativo do zero e criar um projeto totalmente novo
e copiar seu código.
Quão? Bem, no seu projeto e esse é o recurso
nativo do dispositivo, os ótimos locais que construímos no início do curso, onde podemos adicionar locais, onde é claro que
estamos usando a localização, mapas, a câmera, SQLite, onde estamos usando tudo isso coisas, neste projeto, você pode simplesmente executar a expo eject e isso
transforma o seu projeto em um projeto de fluxo de trabalho gerenciado que não é da expo.
Importante, porém, não há como voltar atrás, é claro
que você pode copiar sua pasta e fazer uma cópia de backup e salvá-la ou, se estiver usando o git,
pode voltar para um commit anterior, mas se você não salvou o seu projeto, uma vez que você o
ejeta, você não pode
transformá-lo novamente; portanto, esteja ciente disso.
Você precisaria criar um novo projeto gerenciado da expo e copiar todo o seu código,
se quisesse voltar.
Então, aqui, se você executar o expo eject, deverá ser perguntado para qual tipo de projeto você deseja ejetar
e aqui tenho duas opções no final. Agora, as opções que você vê aqui a propósito podem diferir ao longo
do tempo, mas aqui, as duas opções que eu tenho são o kit bare e expo. O kit Expo foi descontinuado. Isso é
basicamente o que tínhamos antes de termos o fluxo de trabalho vazio; portanto, você não deve realmente mudar
para isso. Em vez disso, pode mudar para bare aqui,
o que significa simplesmente que agora isso será transformado em um projeto React Native, como se fosse
criado com o React Native CLI sem o wrapper expo, mas será
pré-configurado conforme mencionado aqui na página react-native-unimodules. É esse tipo de pacote que o expo
precisa expor todas essas APIs expo a aplicativo não expo. Portanto, ele pré-configura todas essas coisas durante cada ação, para
que você não precise fazer isso, para
obter um aplicativo React Native plus, por assim dizer. Portanto, se eu clicar em enter aqui e
agora importante, você não poderá voltar depois que isso estiver concluído, você pode escolher um nome para
a tela inicial e eu escolherei ótimos lugares aqui, por exemplo, pressione enter, agora nomeie meu Android Studio e Xcode projetos rn-guide,
mas isso é com você e agora isso fará o seu trabalho.
Ele transforma o projeto, adiciona
uma pasta Android e, como estou no macOS, também adiciona uma pasta iOS. É claro que no Windows e Linux,
isso não acontece porque, como você agora precisa criar isso localmente,
ele não pode
criar aplicativos iOS e pré-configura tudo e instala algumas dependências para que você possa usar seu código
existente. e todos os pacotes expo que você já instalou nesta configuração simples, para
que ele não apenas configure todas as
coisas dos unimodules aqui, ele também garante que todos os pacotes que você já esteja usando, como local da
expo ou expo SQLite, também trabalhos. Portanto, agora isso pode demorar um
pouco, então vamos esperar que isso termine e aqui está feito, e você vê que ele realmente me diz que geralmente fez
seu trabalho, mas havia dois pacotes que exigem alguma configuração manual.
Você pode simplesmente clicar nesses links para obter instruções sobre o que você precisa fazer
lá, é o seletor de imagens expo e o pacote de mapas React Native, onde você precisa fazer alguma instalação
manual para finalizar.
Portanto, aqui na página do seletor
de imagem expo, no final, o que precisamos fazer é executar a instalação da porta na pasta iOS, por
isso
precisamos fazer todas as coisas depois de instalar o pacote. Portanto, na pasta do projeto, navegarei no iOS e
executarei a instalação da porta, a porta é como npm para iOS, instala algumas dependências que o
iOS precisa para funcionar corretamente, então é isso que está acontecendo agora e, uma vez feito, também precisamos adicionar essa
entrada aqui ao manifesto do Android, então também precisamos fazer isso.
Portanto, precisamos ir para a pasta Android, a pasta do aplicativo e a pasta de origem,
o AndroidManifest e, conforme descrito aqui, adicionar isso dentro das tags do aplicativo.
Então, aqui está a aplicação e, lá, devemos adicionar esta entrada de atividade aqui, assim, é necessária.
Agora, enquanto eu já estou aqui, você também verá que esse arquivo de manifesto também
foi
configurado de uma certa maneira, inclui todas as permissões e, claro, você não deseja fazer isso, apenas solicita
as permissões você realmente precisa.
Então, como diz aqui, remova as permissões que seu aplicativo não precisa e, por exemplo, meu aplicativo de demonstração
aqui só precisa da permissão de localização e localização de acesso, que eu vou
subir lá e da câmera, é claro, que eu vou subir lá e também a permissão de armazenamento externo de gravação, que também
deve ser necessária.
Na verdade, essas devem ser todas as permissões e você pode verificar todos os pacotes de terceiros ou
todos os pacotes da API expo que você está usando para garantir que não perca nenhuma permissão.
Com isso, vou comentar todas essas permissões aqui e também todas essas permissões e vamos
testá-lo para ver se funciona. Então, com isso, a configuração do pacote do seletor de imagens está concluída. Agora, os mapas do React
Native também precisam ser configurados e podemos mergulhar nas instruções de instalação.
Agora, este comando npm install, que já aconteceu, mas agora o que precisamos
fazer é executar os mapas do React Native link React Native. Então, vamos simplesmente subir um nível
de volta à pasta do projeto raiz e executar o link React Native Mapas
do React Native
e que agora vincularão tudo, verifique se tudo funciona corretamente, se tudo
está configurado corretamente e você ainda precisará fazer algumas instruções coisas, todas essas coisas aqui
não devem ser necessárias, tudo deve ser feito com links, mas no Android, você deve adicionar esta entrada aqui, essa
entrada de metadados à chave do aplicativo no AndroidManifest.
Portanto, aqui dentro do aplicativo, podemos adicionar essa entrada e você deve colocar sua chave da API do
Google Maps.
Agora eu tenho isso na
pasta env, se você se lembra, então eu vou pegar essa chave e adicioná-la aqui, substituir sua chave da API
do Google Maps aqui por ela e
também importante: se você for para a página da API do Google Maps, precisará para ativar esse SDK de mapas para Android para
seu projeto,
isso é importante, caso contrário, isso não funcionará. Para o iOS, você não precisa fazer nada de
especial, a menos que queira usar o Google Maps lá. Nesse caso, siga as instruções fornecidas nas instruções de React Native maps
aqui para saber como usar o Google Maps no iOS, mas no
Android você definitivamente precisamos ativar a API do SDK do Google Maps para Android aqui. Para ativar essa API, você pode acessar o Google Cloud Platform
aqui para o projeto em que trabalhou anteriormente, quando configurou a chave da API e assim por
diante e, aqui, em APIs e serviços, pode acessar a biblioteca que o leva a uma biblioteca de
todas as APIs do Google e do SDK de mapas para Android, é
necessário ativar isso.
Você também precisará configurar o SDK do Google Maps para iOS se quiser usar o Google Maps no iOS,
que não utilizarei aqui.
Agora já deve estar ativado aqui,
mas verifique se está. Portanto, caso não tenha sido
ativado, faça-o definitivamente.
Com isso, isso também deve ser configurado de forma
que funcione e agora, se executarmos o Android de execução nativo react, o aplicativo que construímos em um módulo anterior com o fluxo
de trabalho gerenciado da expo ainda funcionará, agora sem o fluxo de trabalho gerenciado da expo sem o cliente expo que está
sendo usado no simulador ou no dispositivo real, mas construa localmente com o Android Studio ou, é claro, também com o
iOS, se você quiser usá-lo e, portanto, da mesma maneira que faria em um projeto criado pelo React Native CLI,
mas agora, após a
ejeção do fluxo de trabalho gerenciado, o que obviamente significa que todo esse código foi escrito no
fluxo de trabalho gerenciado, e agora eu o executo no fluxo de trabalho não gerenciado, o que é bastante interessante.
Então, vamos esperar que isso termine e ver se esse aplicativo funciona da maneira que deveria.
Está chegando no emulador Android aqui, que é o emulador que eu quero usar para testar porque
lá posso usar a câmera do emulador para testar e, novamente, apenas para enfatizar isso, agora não está usando o aplicativo
cliente expo, também não
poderíamos ' t escanear um código de barras aqui, porque não há código de barras
para escanear, agora este é realmente um aplicativo criado com o Android Studio e enviado para o nosso aplicativo.
Então, aqui está o nosso aplicativo e agora vamos tentar adicionar
um novo local aqui, testar, tirar uma imagem, permitir o acesso à câmera, é claro, e
então tirar essa imagem
sim, recorte-a, escolha
um local no mapa, talvez,
aqui está o mapa, este local parece bom para
mim, salve isso, salve o local, aqui estamos
nós
e agora deixe-me fechar este aplicativo.
Lá, você também vê que esse é realmente um aplicativo
independente instalado. Se eu abrir a gaveta de aplicativos aqui no dispositivo, aqui no simulador, é esse ótimo
aplicativo de lugares que você vê aqui.
Portanto, se eu iniciar isso, agora reiniciaremos o aplicativo em que trabalhamos e o local será armazenado no armazenamento local,
a imagem obviamente
foi armazenada no sistema de arquivos, caso contrário não a veríamos
e funcionaria como antes, mas agora não dentro do cliente expo, mas como um aplicativo autônomo sem nenhum invólucro
expo,
ainda usando algumas das APIs expo e pacotes expo com a ajuda deste pacote unimodules que é automaticamente
adicionado e configurado para o fluxo de trabalho simples que, por outro lado, obtivemos com
a ajuda de ejetar.
Tantas coisas legais acontecendo lá.