反應原生不重疊狀態欄

Question

Im learing原生React，但我不知道如何讓一切不與狀態欄重疊。

I have tried 
translucent={true/flase} 
hidden 

Answer 1

這是正常現象，一個解決方案是將填充添加到等於狀態欄的當前高度的頂級視圖或有StatusBarView具有相同高度的狀態欄。

請參閱此插件https://github.com/jgkim/react-native-status-bar-size以收聽狀態欄高度變化。

對於e.g

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