Android Flavors, como alterar os ícones de sua compilação e ativos com base no sabor usando a mesma base de código.

Recentemente, fui confrontado com a tarefa de usar um conjunto diferente de ativos no aplicativo, mantendo a mesma base de código. E este artigo é sobre como eu o resolvi.

Suponho que você esteja familiarizado com o React-Native básico, saiba o que e ou seja, tenha o Android Studio e o ADB instalados no seu sistema.

Criaremos um aplicativo de teste com dois sabores - Bob Esponja e Mario. O código fonte completo da solução pode ser encontrado aqui: https://github.com/niktechnopro/android_flavors.

Fase 1.

Crie o aplicativo RN (não a Expo):

  1. React-native init android_flavors (usuários do Mac OS - não esqueça de adicionar local.properties com o caminho para o SDK);
  2. Adicione uma pasta de ativos na raiz do seu projeto e coloque 2 imagens nela - eu uso mario.png e spongebob.png.
  3. Criar ícones de inicialização - inicie o Android Studio, escolha no menu, navegue até a pasta android dentro do seu projeto e abra, depois que o projeto for aberto e o gradle estiver sincronizado, para facilitar a escolha em cima:
escolhendo a visão correta

4. Em seguida, navegue até “app / src / main / res”, clique com o botão direito do mouse, escolha Novo e selecione Ativo da imagem (se o seu projeto não foi sincronizado em aberto - você não verá esta opção) - e siga o prompt para criar ícones:

Então, vamos entrar em main / res / values ​​/ strings.xml e alterar o app_name para

5. agora vamos tentar executar este aplicativo a partir da linha de comando e uma vez instalado no emulador - verifique se é possível o ícone em pode ser visto como ícone de inicialização no emulador com o nome “Bob Esponja”;

6. adicione o sabor “mario” - outra pasta no mesmo nível que main e copie dentro pasta de , portanto, sua estrutura de diretórios deve se parecer com abaixo:

A estrutura de projeto

Você não precisa copiar tudo, desde , porque tudo o que está faltando , será automaticamente padronizado para , então colocamos em apenas o que precisa ser mudado nesse sabor;

7. repita o passo <6>, mas desta vez - para criar ícones para "mario / res". Então vamos para dentro de mario / res / values ​​/ strings.xml e alteramos o app_name para "Mario".

Fase 2.

Nesta fase, declararemos sabores em e modifique “scripts” em .

  1. Como modificar descrito aqui: "https://developer.android.com/studio/build/build-variants#product-flavors", portanto, seguiremos as instruções e modificaremos nossa igual a:
build.gradle productFlavors

Aqui, criamos dois sabores: “bob esponja” e “mario”, e para diferenciar entre essas construções, adicionaremos applicationIdSuffix ao aplicativo principal applicationId / nome do pacote = “com.android_flavors”. portanto, o pacote finalizado seria algo assim: “com.android_flavors.spongebob” e “com.android_flavors.mario”.

A Gradle cria automaticamente variantes de construção com base nos tipos de construção, nos sabores dos produtos e nos nomes, de acordo com - então vamos em frente, adicione isso ao package.json em "scripts":

Para esta demonstração, adicionei apenas compilações . Além disso, para a versão de lançamento, será necessário gerar chaves de assinatura - apenas pesquise no Google como fazer isso (é muito fácil assinar seu aplicativo com o Android Studio)." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/raw3h/1586309503045.png" />
  1. Execute o comando "npm run android-bob" para criar o sabor de Bob Esponja, após a compilação copletada, veremos o APP com o nome "Bob Esponja" e o respectivo ícone. Em seguida, execute o comando: (isso listará os pacotes instalados) no Terminal e você deverá ver o pacote: “com.android_flavors.spongebob”;
  2. Agora execute o comando para criar o sabor do Mario e repita os mesmos passos acima 1) para verificar.

Neste ponto, devemos ter dois sabores do mesmo aplicativo instalados com ícones e nomes de aplicativos diferentes! - Legal, não é?

Fase 3.

Nesta fase, adicionaremos lógica para mostrar diferentes ativos / imagens na HomePage do nosso aplicativo, dependendo do tipo instalado. Simplesmente leremos o nome do pacote e apontaremos para a imagem correta nos ativos.

Vamos precisar adicionar um pacote nativo personalizado para obter o nome do pacote e, com base nisso, produzir a imagem certa. Link para desenvolvedor do Android: https://developer.android.com/reference/android/content/Context#getPackageName ();

Seguiremos estas etapas para criar o módulo nativo, ler o nome do pacote e enviar essas informações por Bridge <-> JS> bridge, para que possamos usá-lo dentro da nossa lógica APP.

https://reactnative.dev/docs/native-modules-android

  1. No - crie uma nova classe - PackageReader.java e copie o seguinte para ele:

2. Em seguida, temos que registrar o módulo, para que possamos chamar método de JS, crie outra classe chamada e copie o seguinte:

3. Declarar em MainApplication.java, assim:

4. E, finalmente, vamos adicionar lógica ao nosso JS para produzir a imagem correta, dependendo do nome do pacote, aqui está um código I para o componente "home page":

Observe como eu li o pacote em componentDidMount (você pode usar se você preferir).

Feito!

Portanto, agora, dependendo do tipo de pacote, teremos diferentes nomes de pacotes e diferentes ativos carregados:

Execute o script "npm run android-bob" e obteremos:

E o script "npm run android-mario" nos levará:

E você possui os dois tipos instalados simultaneamente, pois têm nomes de pacotes diferentes:

Felicidades!