反应原生不重叠状态栏

Posted 2023-04-18

【中文标题】反应原生不重叠状态栏

【英文标题】：React native not overlapping statusbar

【发布时间】：2018-01-13 04:30:41

【问题描述】：

我正在学习 React Native，但我不明白如何让所有内容不与状态栏重叠。

I have tried
translucent=true/flase
hidden

【问题讨论】：

请编辑您的问题以插入实际图片，而不是在其他地方插入图片链接。

@Frank Fajardo *** 不允许我这样做：/

请看how to upload an image to a post

@FrankFajardo 需要 10 声望！

【参考方案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>
  );