iPhone模拟器保持状态栏在视图中

【问题标题】：iPhone simulator keeps status bar in viewiPhone模拟器保持状态栏在视图中
【发布时间】：2018-02-04 22:07:44
【问题描述】：

我已经开始使用 React Native 进行移动开发，并从一个简单的 Hello World 示例开始：

import React, { Component } from 'react';
import {
  Text,
  Image,
  View
} from 'react-native';

export default class App extends Component<{}> {
  render() {
    return (
      <View>
        <Text>Hello World</Text>
      </View>      
    );
  }
}

由于某种原因，渲染时没有考虑 iPhone 模拟器中的顶部栏。我从来没有做过 iPhone 开发，我很困惑这是正常的还是我的模拟器有问题。我希望“Hello World”直接显示在本机顶栏下方。这是预期的吗？

【问题讨论】：

标签： ios react-native

【解决方案1】：

是的，您应该在父视图中添加一个与状态栏高度相等的内边距。

理想情况下，您应该创建一个屏幕组件，该组件将添加此填充并使用该屏幕组件包装您的所有内部屏幕

const ScreenWrapper = (props) => {
  return (
    <View style={{paddingTop:30}}>
      {props.children}
    </View>
  );
};

然后您可以对任何新屏幕执行以下操作

import React, { Component } from 'react';
import {
  Text,
  Image,
  View
} from 'react-native';

export default class App extends Component<{}> {
  render() {
    return (
      <ScreenWrapper>
        <View>
           <Text>Hello World</Text>
        </View>
      </ScreenWrapper>      
    );
  }
}

【讨论】：