javascript - 如何在 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'
 }
})