react-native - react 原生不重叠状态栏

Question

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

I have tried
translucent={true/flase}
hidden

Answer 1

这是预期的行为，一种解决方案是在您的顶级 View 中添加一个与状态栏当前高度相等的填充或具有 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>
  );
}