레이아웃이 iOS 상태 표시 줄과 겹치는 것을 방지하는 방법

레이아웃이 iOS 상태 표시 줄과 겹치는 것을 방지하는 방법

---

React Native 탐색 에 대한 튜토리얼 을 작업 중입니다 . 모든 레이아웃이 상태 표시 줄 아래가 아니라 화면 상단에서로드되기 시작한다는 것을 알았습니다. 이로 인해 대부분의 레이아웃이 상태 표시 줄과 겹칩니다. 로드 할 때 뷰에 패딩을 추가하여이 문제를 해결할 수 있습니다. 이것이 실제 방법입니까? 수동으로 패딩을 추가하는 것이 실제 해결 방법이라고 생각하지 않습니다. 이 문제를 해결하는 더 우아한 방법이 있습니까?

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

 

---

이제 SafeAreaViewReact Navigation에 포함 된 것을 사용할 수 있습니다 .

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

---

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

전에:

후:

---

나는 이것을 위해 더 간단한 방법을 시도했습니다.

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

---

iOS에서 작동하는 방법은 다음과 같습니다 .

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

---

탐색 모음 구성 요소에 패딩을 추가하거나 페이스 북 앱처럼 배경색을 사용하여 뷰 트리 상단의 상태 표시 줄과 같은 높이를 가진 뷰를 광고하여이를 처리 할 수 ​​있습니다.

참고 URL : https://stackoverflow.com/questions/42599850/how-to-prevent-layout-from-overlapping-with-ios-status-bar