最佳答案
这是预期的行为,一种解决方案是在您的顶级 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>
);
}
关于react-native - react 原生不重叠状态栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45520281/