Uma olhada rápida no desenvolvedor nativo do React Native para Android / iOS

Madhu Blocked Unblock Seguir Seguindo 9 de outubro de 2017

O React Native é uma tecnologia fantástica que está se tornando rapidamente popular e está mudando fundamentalmente como as empresas criam aplicativos móveis e compartilham códigos comuns entre plataformas.

Guia oficial tem boa documentação que demonstra a integração do React Native em projetos iOS e Android. No guia oficial para Android e iOS, uma atividade / controlador é usada para exibir um componente React Native cobrindo a tela completa. Muitas vezes, os desenvolvedores nativos acham que o React Native precisa de controle total da tela inteira, incluindo barra de navegação, barra inferior, etc. Em um novo aplicativo isso pode fazer sentido, mas em uma situação legada, muitas vezes o controle lógico da aplicação está no aplicativo nativo. espere mais controle do lado nativo. Especificamente navegação, recursos compartilhados como banco de dados devem ser expostos como módulos React Native.

Este artigo tem como objetivo apresentar o fato de que o reagir nativo é baseado em visão e pode ser incorporado como uma visão nativa dentro da hierarquia de exibição do aplicativo de hospedagem. Reagir nativa deve ser pensado como uma exibição especial que pode converter o código da interface do usuário do JavaScript em sua exibição nativa. Além disso, como bônus, você obtém um projeto Android / iOS simples com o React Native integrado. Tudo o que você precisa fazer para dar uma rápida olhada no React Native é clonar o repositório, executar vários comandos e executar o aplicativo.

Repositório para a discussão do código que será seguido está disponível no github .

Aqui está o instantâneo do aplicativo de demonstração no Android e no iOS. O contêiner superior na cor laranja é processado pelo mesmo componente JavaScript React nas duas plataformas.

Android

Instruções detalhadas estão disponíveis no repositório . Aqui está a configuração rápida

  1. Vá para este guia e instale o node , watchman e react-native-cli .
  2. Clone o repo. git clone https://github.com/madhu314/rn-intro-mobile-developer.git
  3. cd para o diretório rn, cd rn e execute npm install
  4. Execute o empacotador com o comando npm start in rn directory
  5. cd para o diretório android, cd android e abra o projeto android no Android Studio
  6. Execute o aplicativo

iOS

Instruções detalhadas estão disponíveis no repositório . Aqui está a configuração rápida

  1. Vá para este guia e instale o node , watchman e react-native-cli .
  2. Clone o repo. git clone https://github.com/madhu314/rn-intro-mobile-developer.git
  3. cd para o diretório rn, cd rn e execute npm install
  4. Execute o empacotador com o comando npm start in rn directory
  5. cd para o diretório ios, cd ios
  6. Execute gem install e, em seguida, rake para instalar todos os pods necessários. Para mais detalhes sobre esta configuração do xcode, veja meu post anterior
  7. Abra o espaço de trabalho xcode e, em seguida, execute o aplicativo.

Se você estiver com problemas para executar o código no repositório ou tiver mais perguntas ou esclarecimentos, sinta-se à vontade para registrar problemas no github . Eu prefiro responder perguntas em questões do github para comentários médios 🙂