Um esboço muito aproximado de um navegador móvel construído com react-native (um "omnibar" e um WebView ). O navegador faz interface com uma API de gateway (que eu também poderia colocar no GitHub) que atua como transporte para protocolos descentralizados (atualmente não suportados) ( DAT , atualmente).
const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )
app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )
app . use ( function ( req , res , next ) {
const orig = req . url
const { referer , host } = req . headers
if ( referer && / ^(/) / . test ( req . url ) ) {
// account for relative asset paths
const folder = referer . replace ( `http:// ${ host } /` , '' )
res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
}
next ( )
} )
app . get ( '/dat/:key' , ( req , res ) => {
const { key } = req . params
Dat ( `./dats/ ${ key } ` , {
key : key
} , function ( err , dat ) {
if ( err ) throw err
dat . joinNetwork ( { } , _ => {
res . json ( {
url : `http:// ${ host } : ${ port } / ${ key } `
} )
} )
} )
} )
app . listen ( port , _ => console . log ( startUpMsg ) )Este projeto foi inicializado com Create React Native App.
Abaixo você encontrará informações sobre como executar tarefas comuns. A versão mais recente deste guia está disponível aqui.
Você só deve atualizar a instalação global do create-react-native-app muito raramente, de preferência nunca.
Atualizar a dependência react-native-scripts do seu aplicativo deve ser tão simples quanto alterar o número da versão em 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 dos pacotes react-native , react e expo e a configuração do sdkVersion correto em app.json . Consulte o guia de controle de versão para obter informações atualizadas sobre compatibilidade de versões de pacotes.
Se o Yarn foi instalado quando o projeto foi inicializado, então as dependências terão sido instaladas via Yarn e você provavelmente deverá usá-lo para executar esses comandos também. Ao contrário da instalação de dependência, a sintaxe de execução do comando é idêntica para Yarn e NPM no momento da redação deste artigo.
npm startExecuta seu aplicativo em modo de desenvolvimento.
Abra-o no aplicativo Expo do seu telefone para visualizá-lo. Ele será recarregado se você salvar as edições em seus arquivos e verá erros de compilação e logs no terminal.
Às vezes, pode ser necessário redefinir ou limpar o cache do empacotador React Native. 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 executor de teste jest em seus testes.
npm run ios Como npm start , mas também tenta abrir seu aplicativo no iOS Simulator se você estiver em um Mac e o tiver instalado.
npm run android Como npm start , mas também tenta abrir seu aplicativo em um dispositivo ou emulador Android conectado. Requer a instalação de ferramentas de compilação do Android (consulte a documentação do React Native para configuração detalhada). Também recomendamos instalar o Genymotion como seu emulador Android. Depois de terminar de configurar o ambiente de construção nativo, há duas opções para disponibilizar a cópia correta do adb para Criar aplicativo React Native:
adb do Android StudioSettings -> ADB . Selecione “Usar ferramentas personalizadas do Android SDK” e atualize com o diretório do Android SDK. adb do Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectIsso iniciará o processo de "ejeção" dos scripts de construção do Create React Native App. Serão feitas algumas perguntas sobre como você gostaria de construir seu projeto.
Aviso: Executar eject é uma ação permanente (além de qualquer sistema de controle de versão que você usa). Um aplicativo ejetado exigirá que você tenha um ambiente Xcode e/ou Android Studio configurado.
Você pode editar app.json para incluir chaves de configuração na chave expo .
Para alterar o nome de exibição do seu aplicativo, defina a chave expo.name em app.json como uma string apropriada.
Para definir um ícone de aplicativo, defina a chave expo.icon em app.json como um caminho local ou um URL. É recomendado usar um arquivo png 512x512 com transparência.
Este projeto está configurado para usar jest para testes. Você pode configurar qualquer estratégia de teste que desejar, mas a brincadeira funciona imediatamente. Crie arquivos de teste em diretórios chamados __tests__ ou com a extensão .test para que os arquivos sejam carregados pelo jest. Consulte o projeto modelo para um exemplo de teste. A documentação do jest também é um recurso maravilhoso, assim como o tutorial de teste do React Native.
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 URL do seu projeto:
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ê carregá-lo no aplicativo por meio de um URL como exp://localhost:19000 , o aplicativo cliente Expo ainda tentará recupere seu aplicativo no endereço IP fornecido pelo script inicial.
Em alguns casos, isso não é o ideal. Este pode ser 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 daquele que é impresso por padrão. Para substituir o endereço IP ou nome do host detectado pelo Create React Native App, você pode especificar seu próprio nome de host por meio 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 escutasse exp://my-custom-ip-address-or-hostname:19000 .
Create React Native App faz muito trabalho para tornar a configuração e o desenvolvimento de aplicativos simples e diretos, mas é muito difícil fazer o mesmo para implantar na App Store da Apple ou na Play Store do Google sem depender de um serviço hospedado.
A Expo fornece hospedagem gratuita para aplicativos somente JS criados pela CRNA, permitindo que você compartilhe seu aplicativo por meio do aplicativo cliente Expo. Isso requer registro para uma conta Expo.
Instale a ferramenta de linha de comando exp e execute o comando de publicação:
$ npm i -g exp
$ exp publish
Você também pode usar um serviço como as compilações autônomas da Expo se quiser obter um IPA/APK para distribuição sem ter que construir o código nativo sozinho.
Se você quiser criar e implantar seu aplicativo sozinho, precisará ejetar do CRNA e usar o Xcode e o Android Studio.
Geralmente, isso é tão simples quanto executar npm run eject em seu projeto, que orientará você durante o processo. Certifique-se de instalar react-native-cli e siga o guia de primeiros passos do código nativo para React Native.
Se você usou APIs Expo enquanto trabalhava em seu projeto, essas chamadas de API deixarão de funcionar se você ejetar para um projeto React Native normal. Se quiser continuar usando essas APIs, você pode ejetar para "React Native + ExpoKit", que ainda permitirá que você construa seu próprio código nativo e continue usando as APIs Expo. Consulte o guia de ejeção para obter mais detalhes sobre esta opção.
Se você não conseguir carregar o aplicativo no telefone devido ao tempo limite da rede ou à conexão recusada, uma boa primeira etapa é verificar se o telefone e o computador estão na mesma rede e se podem se comunicar. O aplicativo Create React Native precisa de acesso às portas 19000 e 19001, portanto, certifique-se de que as configurações de rede e firewall permitam o acesso do seu dispositivo ao computador em ambas as portas.
Tente abrir um navegador da web em seu telefone e abrir a URL impressa pelo script do empacotador, substituindo exp:// por http:// . Então, por exemplo, se abaixo do código QR em seu terminal você vir:
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 repositório Create React Native App 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 do seu telefone, tente usar o recurso tethering/ponto de acesso móvel no seu telefone (no entanto, tome cuidado com o uso de dados), conecte seu computador a essa rede WiFi e reinicie o empacotador. Se você estiver usando uma VPN, pode ser necessário desativá-la.
Se você estiver em um Mac, há alguns erros que os usuários às vezes veem ao tentar npm run ios :
Existem algumas etapas que você pode seguir para solucionar esses tipos de erros:
Command Line Tools esteja definida como algo. Às vezes, quando as ferramentas CLI são instaladas pela primeira vez pelo Homebrew, esta 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 fazer isso.Reset Contents and Settings... . Depois de terminar, saia do Simulador e execute novamente npm/yarn run ios .Se você não conseguir escanear o código QR, certifique-se de que a câmera do seu telefone esteja focando corretamente e também de que o contraste das duas cores do seu terminal seja alto o suficiente. Por exemplo, os temas padrão do WebStorm podem não ter contraste suficiente para que os códigos QR do terminal possam ser lidos com os leitores de código de barras do sistema que o aplicativo Expo usa.
Se isso causar problemas para você, você pode tentar alterar o tema de cores do seu terminal para ter mais contraste ou executar Create React Native App em um terminal diferente. Você também pode inserir manualmente o URL impresso pelo script do empacotador na barra de pesquisa do aplicativo Expo para carregá-lo manualmente.
