如何在React Native中設置iPhone X上的缺口顏色

Question

我一直在通過iOS模擬器在iPhone X上測試我的應用程序。 我想知道如何將黑色凹槽重新調整為與我的應用主題相同的顏色。

這是當前的實現：

如何將黑條更改為藍色，與我的主題相匹配？

Answer 1

您可以簡單地使用react-native新版本51中的SafeAreaView。

import {
  ...
  SafeAreaView
} from 'react-native';
class Main extends React.Component {
 render() {
   return (
     <SafeAreaView style={styles.safeArea}>
       <App />
     </SafeAreaView>
   )
 }
}
const styles = StyleSheet.create({
 ...,
 safeArea: {
  flex: 1,
  backgroundColor: '#FF5236'
 }
})

Answer 2

請參閱： 如何在React Native中設置iOS狀態欄背景顏色？

• 對於iPhone X，將StatusBarHeightIos從20增加到30
• 我使用react-native-device-info來檢測設備

import DeviceInfo from 'react-native-device-info';

// getModel: iPhone X // getDeviceId: iPhone10,3 const ModelIphoneX = 'iPhone X';

// StatusBarHeight is where Carrier info and date display at top // iPhone X has a cut-out in top of dispaly where sensor package is located. // For iPhone X increase height so cut-out does not hide text const StatusBarHeightIos = DeviceInfo.getModel() === ModelIphoneX ? 30 : 20; const StatusBarHeight = Platform.OS === 'ios' ? StatusBarHeightIos : 0;

屏幕截圖：左側是iPhone X.

Answer 3

通過使用XCode將應用程序啟動屏幕從圖像資源更改為故事板，可以解決此問題。