ネイティブではないネイティブのステータスバーに反応してください

Question

ネイティブに反応しますが、ステータスバーと重ならないようにする方法を理解していません。

I have tried 
translucent={true/flase} 
hidden 

Answer 1

これは正常な動作です、1つの解決策は、ステータスバーの現在の高さに等しいあなたのトップレベルのビューにパディングを追加したり、ステータスバーと同じ高さを有しているStatusBarViewを持つことです。

ステータスバーの高さの変化を聞くには、このプラグインhttps://github.com/jgkim/react-native-status-bar-sizeを参照してください。例えば

あなたの画面内の今

import _ from 'lodash'; 
import React, { Component } from 'react'; 
import { View, StatusBar} from 'react-native'; 
import StatusBarSizeIOS from 'react-native-status-bar-size'; 

const STATUS_BAR_EXTRA_PADDING = 2; 
const DEFAULT_STATUS_BAR_HEIGHT = 10; 

class StatusBarView extends Component { 
    state = { 
    statusBarHeight: _.get(StatusBarSizeIOS, 'currentHeight', DEFAULT_STATUS_BAR_HEIGHT); 
    } 

    _handleStatusBarSizeDidChange = (statusBarHeight) => this.setState({ statusBarHeight }) 

    componentDidMount() { 
    StatusBarSizeIOS.addEventListener('didChange', this._handleStatusBarSizeDidChange); 
    } 

    render() { 
    return (
     <View 
     style={{ 
      height: this.state.statusBarHeight + STATUS_BAR_EXTRA_PADDING, 
     }} 
     > 
     <StatusBar {...this.props} /> 
     </View> 
    ); 
    } 
} 

export default StatusBarView; 

あなたは

import StatusBarView from '{view_path}'; 
... 
render() { 
    return (
    <View> 
     <StatusBarView barStyle="default" /> 
     <View>{rest of the view}</View> 
    </View> 
); 
}