React Native - Pasek stanu

W tym rozdziale pokażemy, jak kontrolować wygląd paska stanu w React Native.

Pasek stanu jest łatwy w użyciu i wszystko, co musisz zrobić, to ustawić właściwości, aby go zmienić.

Plik hiddenmożna użyć do ukrycia paska stanu. W naszym przykładzie jest ustawiony nafalse. To jest wartość domyślna.

Plik barStyle może mieć trzy wartości - dark-content, light-content i default.

Ten komponent ma kilka innych właściwości, których można użyć. Niektóre z nich są przeznaczone dla systemu Android lub IOS. Możesz to sprawdzić w oficjalnej dokumentacji.

App.js

import React, { Component } from 'react';
import { StatusBar } from 'react-native'

const App = () => {
   return (
      <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/>
   )
}
export default App

Jeśli uruchomimy aplikację, pasek stanu będzie widoczny, a treść będzie miała ciemny kolor.

Wynik