ReactNative-ステータスバー

この章では、ReactNativeでステータスバーの外観を制御する方法を説明します。

ステータスバーは使いやすく、プロパティを設定して変更するだけです。

ザ・ hiddenプロパティを使用してステータスバーを非表示にすることができます。この例では、次のように設定されていますfalse。これはデフォルト値です。

ザ・ barStyle 3つの値を持つことができます– dark-content, light-content そして default。

このコンポーネントには、使用できる他のいくつかのプロパティがあります。それらのいくつかはAndroidまたはIOS固有です。公式ドキュメントで確認できます。

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

アプリを実行すると、ステータスバーが表示され、コンテンツの色が暗くなります。

出力