1

Olá, estou desenvolvendo uma aplicação com Ionic3 e quando inicio o app no emulador roda bacana, porém é comum nos aplicativos a barra preta ficar na cor do header porém em um tom mais escuro. Como fazer isso?

inserir a descrição da imagem aqui

Outra coisa, quando simulo no iOS a barra superior fica sobre os elementos da aplicação, como corrigir?

inserir a descrição da imagem aqui

2
  • Desculpa perguntar em cima da sua pergunta, esse layout você que produziu ou é algo que já vem no ionic ... !!! eu mexo com angular e react e sempre temos que instalar kkk
    – novic
    Commented 3/08/2018 às 15:16
  • 1
    Olá, o layout deste header (botões, seachbar e carrinho) foi criado por mim, porém utiliza-se de componentes prontos do Ionic, a propriedade de posicionamento do elemento é do proprio framework (utilizo Start e End para posicionar os elementos), alguma estilização como no caso do balão do carrinho fiz manualmente (SCSS), mas os componentes são praticamente prontos para uso. Commented 3/08/2018 às 15:30

1 Resposta 1

3

Você pode alterar a cor da barra superior e corrigir a barra no IOS com o plugin cordova-plugin-statusbar. Inclua no config.xml a propriedade StatusBarOverlaysWebView para alterar a cor e a StatusBarOverlaysWebView como false para que o menu superior não fique sobre seu app no IOS.

Instale o plugin:

ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar

Inclua no app.module.ts:

import { StatusBar } from '@ionic-native/status-bar';
...
providers: [
  StatusBar,
...

Inclua no config.xml:

<platform name="android">
    <preference name="StatusBarBackgroundColor" value="#000000" />
</platform>

<platform name="ios">
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
</platform>
3
  • Olá Renata, obrigado pelo retorno, realizei o procedimento conforme orientado, porém o teste com "ionic serve --lab" não mostra a alteração. Acho que terei que instalar um emulador para a plataforma desejada (android e iOs), vc utiliza algum específico, qual? Commented 3/08/2018 às 16:00
  • 1
    Um dos emuladores que eu uso é o Ionic DevApp, que é um aplicativo que você instala no seu celular. Conectando o celular na mesma rede que o seu computador, digite ionic serve -c na linha de comando. O Ionic DevApp é muito útil para testar alguns plugins nativos.
    – Renata
    Commented 3/08/2018 às 16:12
  • Valeu Renata, estou fazendo os testes aqui, muito obrigo pelo direcionamento. Commented 3/08/2018 às 17:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .