Réagir natif ne pas chevaucher la barre d'état

Question

Im learing Réagir natif mais je ne comprends pas comment faire tout pour ne pas chevaucher la barre d'état.

I have tried 
translucent={true/flase} 
hidden 

Answer 1

Ce comportement est normal, une solution consiste à ajouter un rembourrage à votre point de vue de haut niveau égal à la hauteur actuelle de la barre d'état ou un StatusBarView qui a la même hauteur que la barre d'état.

Référez-vous à ce plugin https://github.com/jgkim/react-native-status-bar-size pour écouter les changements de hauteur de la barre d'état.

Pour par exemple

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; 

maintenant dans vos écrans, vous pouvez faire quelque chose comme

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