web-dev-qa-db-ja.com

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

私は tutorial for Reactネイティブナビゲーションに取り組んでいます。ステータスバーの下ではなく、画面の上部からすべてのレイアウトの読み込みが開始されることがわかりました。これにより、ほとんどのレイアウトがステータスバーと重なります。ビューを読み込むときにビューにパディングを追加することでこれを修正できます。これが実際の方法ですか？手動でパディングを追加することは、それを解決する実際の方法だとは思いません。これを修正するよりエレガントな方法はありますか？

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> 
            )   
    }    
}

以下は、パディングが追加される前後のスクリーンショットです。 before adding padding

after adding padding

iosreact-native
61
Cliff

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

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>
    )
  }
}

30
Luis Rizo

これで、Reactナビゲーションに含まれるSafeAreaViewを使用できます。

<SafeAreaView>
    ... your content ...
</SafeAreaView>
36
Greg Ennis

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

ただし、React Nativeの 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>
    )
}

12
Asaf Katz

もっと簡単な方法を試しました。

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
  }
});
5
Gaurav Saluja

これが機能する方法ですiOSの場合：

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

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

1
philipheinser