React-native-status-bar
提供:Dev Guides
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
アプリを実行すると、ステータスバーが表示され、コンテンツの色が濃くなります。