create react native app redux auth
1.0.0
Este é um placa de caldeira Create-React-native com Redux & Local Auth & React Navigation integral.
create-react-native-app-redux-auth gera todos os arquivos fundamentais para um novo aplicativo nativo do React com o Redux conectado (para gerenciamento de estado), além de navegação reagir e autenticação local completamente feita!
Você pode trabalhar com todos os componentes e APIs no React Native, bem como a maioria das APIs JavaScript que o aplicativo Expo fornece.
create-react-native-app-redux-auth !Um tutorial escrito completo pode ser encontrado aqui.
Este projeto foi inicializado com o Create React Native App e o FSG.
Verifique se você possui o Node V6 ou posteriormente instalado, bem como a versão atual do Expo Client 2.5.0 no seu dispositivo móvel, a fim de suportar o React Native 0.55. Não é necessária a instalação do Xcode ou Android Studio.
$ npm install -g create-react-native-app-redux-auth A ferramenta de linha de comando create-react-native-app-redux-auth pode ser usada de algumas maneiras diferentes.
$ create-react-native-app-redux-auth Simplesmente executar create-react-native-app-redux-auth em um diretório cria um sub-folder generated contendo seus novos arquivos de aplicativos.
Como alternativa, create-react-native-app-redux-auth pode seguir um caminho de arquivo (relativo ou absoluto, e até mesmo um que ainda não existe), e ele usará/criará a pasta de destino e o preencherá com seus novos arquivos de aplicativos.
$ create-react-native-app-redux-auth path/to/any/directory/you/prefer Se você já fez e cd 'D em um diretório e deseja preenchê -lo com os novos arquivos de aplicativos, basta usar o . caminho.
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder! Depois de gerar os arquivos, verifique se os seguintes comandos são executados na raiz do projeto ( generated/ a menos que você tenha usado um argumento de caminho, conforme explicado acima):
$ npm installPara começar rápido, basta mudar 2 coisas :
package.json , altere o "nome" para o nome do seu aplicativo.IP.js , altere o IP para o endereço IP completo do seu back -end, seja no localhost:PORT ou em algum lugar implantado, como o Heroku.Para ativar a autenticação local interna, o projeto gerado assume um banco de dados em execução. Você deve configurar seu servidor para as chamadas do Redux Axios:
${IP}/auth/login com a carga útil {email: email, senha: senha}.${IP}/auth/signup com a carga útil {email: email, senha: senha}.${IP}/auth/logout sem carga útil. $ npm startObrigado por jogar! Hadoken. ?
Abaixo, você encontrará informações sobre como executar tarefas comuns. A versão mais recente deste guia está disponível aqui.
Você só deve precisar atualizar a instalação global do create-react-native-app muito raramente, idealmente nunca.
A atualização da dependência do seu aplicativo react-native-scripts deve ser tão simples quanto esbarrar no número da versão no package.json e reinstalar as dependências do seu projeto.
A atualização para uma nova versão do React Native requer a atualização das versões de pacote react-native , react e expo e definindo o sdkVersion correto em app.json . Consulte o guia de versão para obter informações atualizadas sobre a compatibilidade da versão do pacote.
Se o fio foi instalado quando o projeto foi inicializado, as dependências serão instaladas via YARN e você provavelmente deve usá -lo para executar esses comandos também. Diferentemente da instalação de dependência, a sintaxe de comando em execução é idêntica para fios e npm no momento da redação deste artigo.
npm startExecuta seu aplicativo no modo de desenvolvimento.
Abra -o no aplicativo Expo no seu telefone para visualizá -lo. Ele recarregará se você salvar edições em seus arquivos e você verá erros de criação e logs no terminal.
Às vezes, pode ser necessário redefinir ou limpar o cache do Packager nativo do React. Para fazer isso, você pode passar o sinalizador --reset-cache para o script inicial:
npm start --reset-cache
# or
yarn start --reset-cache
npm testExecuta o Jest Test Runner em seus testes.
npm run ios Como npm start , mas também tenta abrir seu aplicativo no simulador iOS, se você estiver em um Mac e o instalar.
npm run android Assim como npm start , mas também tenta abrir seu aplicativo em um dispositivo ou emulador Android conectado. Requer uma instalação de ferramentas de construção do Android (consulte os documentos nativos do React para obter uma configuração detalhada). Também recomendamos a instalação do Genymotion como seu emulador Android. Depois de terminar de configurar o ambiente de construção nativa, há duas opções para disponibilizar a cópia correta do adb para criar o aplicativo nativo do React:
adb do Android StudioSettings -> ADB . Selecione “Use ferramentas personalizadas do Android SDK” e atualize com o seu diretório Android SDK. adb do Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ /macos/tools/.npm run ejectIsso iniciará o processo de "ejetar" a partir de scripts de criação do Create React Native App. Você recebe algumas perguntas sobre como você gostaria de construir seu projeto.
AVISO: Executar ejeção é uma ação permanente (além de qualquer sistema de controle de versão que você usar). Um aplicativo ejetado exigirá que você tenha um ambiente Xcode e/ou Android Studio configurado.
Você pode editar app.json para incluir teclas de configuração na tecla expo .
Para alterar o nome de exibição do seu aplicativo, defina a tecla expo.name no app.json como uma string apropriada.
Para definir um ícone de aplicativo, defina a chave expo.icon no app.json como um caminho local ou um URL. É recomendável que você use um arquivo PNG de 512x512 com transparência.
Este projeto foi configurado para usar o JEST para testes. Você pode configurar qualquer estratégia de teste que desejar, mas o JEST funciona fora da caixa. Crie arquivos de teste em diretórios chamados __tests__ ou com a extensão .test para que os arquivos carregados pelo JEST. Consulte o projeto do modelo para obter um teste de exemplo. A documentação do jest também é um recurso maravilhoso, assim como o tutorial de testes nativos do React.
Você pode configurar alguns dos comportamentos do Create React Native App usando variáveis de ambiente.
Ao iniciar seu projeto, você verá algo assim para o seu projeto de URL:
exp://192.168.0.2:19000
O "manifesto" nesse URL informa ao aplicativo Expo como recuperar e carregar o pacote JavaScript do seu aplicativo; portanto, mesmo se você o carregar no aplicativo por meio de um URL como exp://localhost:19000
Em alguns casos, isso é menos do que o ideal. Pode ser esse o caso se você precisar executar seu projeto dentro de uma máquina virtual e precisar acessar o empacotador por meio de um endereço IP diferente do que imprime por padrão. Para substituir o endereço IP ou o nome do host que é detectado pelo Create React Native App, você pode especificar seu próprio nome de host através da variável de ambiente REACT_NATIVE_PACKAGER_HOSTNAME :
Mac e Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Windows:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
O exemplo acima faria com que o servidor de desenvolvimento ouça em exp://my-custom-ip-address-or-hostname:19000
O Create React Native App faz muito trabalho para tornar a configuração e o desenvolvimento do aplicativo simples e direto, mas é muito difícil fazer o mesmo para implantar na App Store da Apple ou na loja de plays do Google sem depender de um serviço hospedado.
A Expo fornece hospedagem gratuita para os aplicativos apenas JS criados pelo CRNA, permitindo que você compartilhe seu aplicativo através do aplicativo Expo Client. Isso requer registro para uma conta Expo.
Instale a ferramenta exp Command-Line e execute o comando publicish:
$ npm i -g exp
$ exp publish
Você também pode usar um serviço como as compilações independentes da Expo se desejar obter um IPA/APK para distribuição sem precisar criar o código nativo.
Se você deseja criar e implantar seu aplicativo, precisará ejetar no CRNA e usar o Xcode e o Android Studio.
Geralmente, isso é tão simples quanto a execução npm run eject em seu projeto, o que o levará pelo processo. Certifique-se de instalar react-native-cli e siga o guia de início do código nativo para o React Native.
Se você fez uso de APIs da Expo enquanto trabalha em seu projeto, essas chamadas de API pararão de funcionar se você ejetará um projeto nativo de React regular. Se você deseja continuar usando essas APIs, pode ejetar para "reagir nativo + expokit", que ainda permitirá que você construa seu próprio código nativo e continue usando as APIs da Expo. Consulte o guia de ejeção para obter mais detalhes sobre esta opção.
Se você não conseguir carregar seu aplicativo no telefone devido a um tempo limite de rede ou uma conexão recusada, um bom primeiro passo é verificar se o telefone e o computador estão na mesma rede e que eles podem se alcançar. Criar o aplicativo nativo React precisa de acesso às portas 19000 e 19001, portanto, verifique se as configurações de rede e firewall permitem o acesso do seu dispositivo no seu computador em ambas as portas.
Tente abrir um navegador da web no seu telefone e abrir o URL que o script do Packager imprime, substituindo exp:// por http:// . Assim, por exemplo, se embaixo do código QR no seu terminal, você vê:
exp://192.168.0.1:19000
Tente abrir o Safari ou Chrome no seu telefone e carregar
http://192.168.0.1:19000
e
http://192.168.0.1:19001
Se isso funcionar, mas você ainda não conseguir carregar seu aplicativo, digitalizando o código QR, abra um problema no React Appositório de App Create React com detalhes sobre essas etapas e quaisquer outras mensagens de erro que você possa ter recebido.
Se você não conseguir carregar o URL http no navegador da Web do seu telefone, tente usar o recurso de tethering/Mobile Hotspot no seu telefone (cuidado com o uso de dados), conectando seu computador a essa rede Wi -Fi e reiniciando o empacotador. Se você estiver usando uma VPN, pode ser necessário desativá -lo.
Se você está em um Mac, existem alguns erros que os usuários às vezes veem ao tentar o npm run ios :
Existem algumas etapas que você pode seguir para solucionar esses tipos de erros:
Command Line Tools está definida como algo. Às vezes, quando as ferramentas da CLI são instaladas pela primeira vez pelo Homebrew, essa opção é deixada em branco, o que pode impedir que os utilitários da Apple encontrem o simulador. Certifique-se de executar novamente npm/yarn run ios depois de fazê-lo.Reset Contents and Settings... Depois que terminar, saia do simulador e execute novamente npm/yarn run ios .Se você não conseguir digitalizar o código QR, verifique se a câmera do seu telefone está focada corretamente e também verifique se o contraste nas duas cores do seu terminal é alto o suficiente. Por exemplo, os temas padrão do WebStorm podem não ter contraste suficientes para que os códigos QR terminais sejam digitalizados com os scanners de código de barras do sistema que o aplicativo Expo usa.
Se isso causar problemas para você, você pode tentar alterar o tema da cor do seu terminal para ter mais contraste ou em execução Criar um aplicativo nativo de reação a partir de um terminal diferente. Você também pode inserir manualmente o URL impresso pelo script do Packager na barra de pesquisa do aplicativo Expo para carregá -lo manualmente.
