web-dev-qa-db-ja.com

Android through React Native？

ステータスバーの高さをAndroid through React Native？

React.Dimensions height値にはステータスバーの高さも含まれているようですが、ステータスバーのないレイアウトの高さを見つけようとしています。

androidreact-nativestatusbar
37
Zohar Levin

このプラグインは必要ありません（もう）、StatusBar.currentHeight：

import {StatusBar} from 'react-native';
console.log('statusBarHeight: ', StatusBar.currentHeight);

編集：どうやらこれはAndroidで常に動作するようですが、iOSでは最初にundefinedが実際に返されます:(

65
IjzerenHein

残念ながら、v0.34の時点で、これを行うためのAPIはプラットフォーム間で一貫性がありません。 _StatusBarManager.HEIGHT_は、Androidのステータスバーの現在の高さを提供します。

_import { Platform, NativeModules } from 'react-native';
const { StatusBarManager } = NativeModules;

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;
_

IOSでは、getHeight()を使用できます

_StatusBarManager.getHeight((statusBarHeight)=>{
  console.log(statusBarHeight)
})
_

サイドノートとして、デフォルトのiOSの動作に似たAndroidのステータスバーの下にアプリを描画したい場合は、_<StatusBar>_にいくつかの小道具を設定することで行うことができます次のとおりです。

_<StatusBar translucent={true} backgroundColor={'transparent'} {...props} />   
_
23
jmurzy