レイアウトがiOSステータスバーと重ならないようにする方法

ReactNativeナビゲーションのチュートリアルに取り組んでいます。すべてのレイアウトがステータスバーの下ではなく、画面の上から読み込まれることがわかりました。これにより、ほとんどのレイアウトがステータスバーと重なります。ロード時にビューにパディングを追加することで、これを修正できます。これは実際の方法ですか？手動でパディングを追加することは、それを解決する実際の方法ではないと思います。これを修正するためのよりエレガントな方法はありますか？

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';

export default class MyScene extends Component {
    static get defaultProps() {
            return {
                    title : 'MyScene'    
            };  
    }   
    render() {
            return (
                    <View style={{padding: 20}}> //padding to prevent overlap
                            <Text>Hi! My name is {this.props.title}.</Text>
                    </View> 
            )   
    }    
}

以下に、パディングを追加する前後のスクリーンショットを示します。

これを修正する非常に簡単な方法があります。コンポーネントを作成します。

StatusBarコンポーネントを作成し、親コンポーネントの最初のビューラッパーの後に最初に呼び出すことができます。

これが私が使っているもののコードです：

'use strict'
import React, {Component} from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';

class StatusBarBackground extends Component{
  render(){
    return(
      <View style={[styles.statusBarBackground, this.props.style || {}]}> //This part is just so you can change the color of the status bar from the parents by passing it as a prop
      </View>
    );
  }
}

const styles = StyleSheet.create({
  statusBarBackground: {
    height: (Platform.OS === 'ios') ? 18 : 0, //this is just to test if the platform is iOS to give it a height of 18, else, no height (Android apps have their own status bar)
    backgroundColor: "white",
  }

})

module.exports= StatusBarBackground

これを実行してメインコンポーネントにエクスポートした後、次のように呼び出します。

import StatusBarBackground from './YourPath/StatusBarBackground'

export default class MyScene extends Component {
  render(){
    return(
      <View>
        <StatusBarBackground style={{backgroundColor:'midnightblue'}}/>
      </View>
    )
  }
}

これSafeAreaViewで、ReactNavigationに含まれているものを使用できます。

<SafeAreaView>
    ... your content ...
</SafeAreaView>

私はこれのためにもっと簡単な方法を試しました。

Androidでステータスバーの高さを取得し、SafeAreaViewを一緒に使用して、両方のプラットフォームでコードを機能させることができます。

import { SafeAreaView, StatusBar, Platform } from 'react-native';

ログアウトしてログを取得するPlatform.OSとStatusBar.currentHeight、

console.log('Height on: ', Platform.OS, StatusBar.currentHeight);

高さ：android 24および高さ：android 24

オプションで、を使用してコンテナビューにマージン/パディングを追加できるようになりました。

paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

App.jsの最終的なコードは次のとおりです。

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
        <View style={styles.container}>
          <Text>Hello World</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});

@philipheinserソリューションは確かに機能します。

ただし、ReactNativeのStatusBarコンポーネントがそれを処理してくれることを期待しています。

残念ながら、そうではありませんが、その周りに独自のコンポーネントを作成することで、非常に簡単に抽象化できます。

./StatusBar.js

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

// here, we add the spacing for iOS
// and pass the rest of the props to React Native's StatusBar

export default function (props) {
    const height = (Platform.OS === 'ios') ? 20 : 0;
    const { backgroundColor } = props;

    return (
        <View style={{ height, backgroundColor }}>
            <StatusBar { ...props } />
        </View>
    );
}

./index.js

import React from 'react';
import { View } from 'react-native';

import StatusBar from './StatusBar';

export default function App () {
    return (
      <View>
        <StatusBar backgroundColor="#2EBD6B" barStyle="light-content" />
        { /* rest of our app */ }
      </View>
    )
}

react-navigationドキュメントは、このための素晴らしい解決策を持っています。まず、次の理由から、ReactNativeに含まれているものを使用しないことをお勧め します。SafeAreaView

React NativeはSafeAreaViewコンポーネントをエクスポートしますが、いくつかの固有の問題があります。つまり、セーフエリアを含む画面がアニメーション化されている場合、ジャンプ動作が発生します。さらに、このコンポーネントはiOS 10以降のみをサポートし、古いバージョンのiOSまたはAndroidはサポートしていません。より信頼性の高い方法で安全な領域を処理するには、react-native-safe-area-contextライブラリを使用することをお勧めします。

代わりに、react-native-safe-area-contextを推奨しています-これを使用すると、次のようになります。

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';
import { useSafeArea } from 'react-native-safe-area-context';

export default function MyScene({title = 'MyScene'}) {
    const insets = useSafeArea();

    return (
        <View style={{paddingTop: insets.top}}>
            <Text>Hi! My name is {title}.</Text>
        </View> 
    )   
}

SafeAreaViewただし、最近の電話ではUI要素と重複する可能性のある要素が下部にある可能性があるため、このライブラリが提供するを使用することをお勧めします。もちろん、それはすべてあなたのアプリに依存します。（詳細についてreact-navigationは、最初にリンクしたドキュメントを参照してください。）

iOSで機能する方法は次のとおりです。

<View style={{height: 20, backgroundColor: 'white', marginTop: -20, zIndex: 2}}>
   <StatusBar barStyle="dark-content"/></View>

これを処理するには、ナビゲーションバーコンポーネントにパディングを追加するか、Facebookアプリのように、ビューツリーの上部にあるステータスバーと同じ高さのビューを背景色で広告します。

この機能を実現するには、Simple UserReactのネイティブデフォルトステータスバーを使用します。

<View style={styles.container}>
    <StatusBar backgroundColor={Color.TRANSPARENT} translucent={true} />
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      region={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
    />
  </View>