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

Question

我已经开始使用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”直接显示在原生顶部栏下。这是预期的吗？

Answer 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>      
    );
  }
}