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

Posted 2023-03-11

【中文标题】iPhone模拟器保持状态栏在视图中

【英文标题】：iPhone simulator keeps status bar in view

【发布时间】：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”直接显示在本机顶栏下方。这是预期的吗？

【参考方案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>      
    );