反应原生不重叠状态栏答案

【问题标题】：React native not overlapping statusbar反应原生不重叠状态栏
【发布时间】：2018-01-13 04:30:41
【问题描述】：

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

I have tried
translucent={true/flase}
hidden

【问题讨论】：

请编辑您的问题以插入实际图片，而不是在其他地方插入图片链接。
@Frank Fajardo Stackoverflow 不允许我这样做：/
请看how to upload an image to a post
@FrankFajardo 需要 10 声望！

标签： react-native statusbar overlapping

【解决方案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>
  );
}

【讨论】：