React本机不重叠状态栏

Question

我学习React原生，但我不明白如何让一切都不与状态栏重叠。

I have tried
translucent={true/flase}
hidden

Answer 1

This is expected behaviour, one solution is to add a padding to your top level view equal to current height of status bar or have a StatusBarView that has same height as the status bar.

Refer to this plugin https://github.com/jgkim/react-native-status-bar-size for listening to status bar height changes.

For 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;

Now inside your screens you could do something like

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