React Native를 사용하여 상태 표시줄 숨기기

React Native를 사용하여 상태 표시줄 숨기기

React Native로 개발할 때 iOS 또는 Android의 상태 표시줄을 숨기려면 어떻게 해야 합니까?상태 표시줄을 가져왔는데 상태 표시줄도 있는 것 같습니다.IOS 및 Android용 상태 표시줄.

상태 표시줄을 숨기는 방법을 알아냈어먼저 StatusBarIOS는 권장되지 않으므로 Import해야 합니다.StatusBar렌더링 맨 위에 다음 코드 스니펫을 포함하기만 하면 됩니다.

<StatusBar hidden />

네이티브 문서 반응StatusBar

이 메서드는 컴포넌트 내의 임의의 장소에서 호출할 수 있습니다.

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

class MyComponent extends Component {

    componentDidMount() {
       StatusBar.setHidden(true);
    }
}

편집:

이렇게 하면 특정 구성 요소뿐만 아니라 전체 앱에 대한 상태 표시줄이 숨겨져 다음과 같은 작업을 수행할 수 있습니다.

componentWillUnmount() {
     StatusBar.setHidden(false);
}

아니면 다른 곳에서 거짓으로 이 메서드를 호출했을 수도 있습니다.

숨김의 경우:

StatusBar.setHidden(true, 'none');

표시용:

StatusBar.setHidden(false, 'slide');

StatusBar 컴포넌트를 Import하여 숨겨진 소품에 true를 전달하는 간단한 방법을 선호합니다.

심플하게:

import React from "react";
import { StatusBar, View, Text } from "react-native";

class App extends React.Component {

    render() {
       return (
        <View>
          <StatusBar hidden={true} />
          <Text>Hello React Native!</Text>
        </View>
       )
    }
}

버전 0부터?? ~ 현재 (0.55 / 2018년 6월)

<StatusBar hidden />

이 답변의 첫 번째 코멘트에 대한 크레딧

먼저 여기에 나와 있는 다른 답변에 따라 상태 표시줄 구성 요소를 가져오십시오.

컴포넌트가 중복되는 것을 방지하기 위해 숨길 경우 다음과 같이 SafeAreaView를 사용하는 것이 좋습니다.

<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
  <View style={{flex: 1}}>
    <Text>Hello World!</Text>
  </View>
</SafeAreaView>

화면의 부모 컴포넌트여야 하며 옵션으로backgroundColor화면 색상과 일치합니다.반드시 설정해 주세요.flex기여하다.이제 상태 표시줄에서 사용되지 않는 모든 영역을 구성 요소가 차지합니다.이것은 특히 일부 최신 전화기의 '노치' 문제를 피하는 데 유용합니다.

SafeAreaView는 react-native의 컴포넌트이므로 Import에 추가해야 합니다.

import { SafeAreaView, Text, View } from 'react-native';

Android에서 투명하게 하기 위해 이 작업을 수행할 수 있습니다.

<StatusBar  backgroundColor={'#ffffff00'} />

{Platform.OS === 'ios' && <StatusBar barStyle="light-content" />} 

또한.<StatusBar hidden />숨겨져 있지만 맨 위에 여백이 보일 수 있습니다.

효과가 없었으면 뭘 했든 상관없겠지?

아마 또 다른 사람이 있을 거야<StatusBar hidden="false">당신의 코드로.그리고 그것은 당신의 정의보다 더 깊다.이것으로 이전 버전이 대체됩니다.hidden="true"설정.

<View>
  <StatusBar hidden={true} /> // this will be replaced by the deeper StatusBar tag
  
  <View>
    <StatusBar hidden={false} /> // remove this or put your `hidden="true"` here
  </View>
</View>

언급URL : https://stackoverflow.com/questions/36186385/hiding-the-status-bar-with-react-native