React Native-ステータスバー

この章では、React Nativeでステータスバーの外観を制御する方法を示します。

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

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

*barStyle* には、 *dark-content、light-content* 、および *default* の3つの値があります。

このコンポーネントには、使用可能な他のプロパティがいくつかあります。それらのいくつかは、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

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

出力

React Nativeステータスバー

React-native-status-bar

React Native-ステータスバー

App.js

出力