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