首先，根据官网的介绍，通过npx @react-native-community/cli@latest init AwesomeProject初始化项目后，安卓环境运行效果如下图：
为了看清楚，我把顶部栏背景改为深色了。默认情况下，内容区域是不含盖状态栏部分的，有两种方式可以实现全面屏：
第一种方式是修改安卓的样式配置文件，style.xml，如下面代码
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
<!-- 全屏显示，使导航栏不占位置 -->
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:navigationBarColor">@android:color/transparent</item>
</style>
</resources>
-
打开
res/values/styles.xml文件。 -
在当前的主题（
<style>标签）中，设置android:windowTranslucentNavigation属性为true，这样可以实现导航栏的半透明效果。 -
还可以通过将
android:navigationBarColor设置为透明色来增强透明效果。
效果如下：
注意：这时候顶部状态栏是不占用任何高度的，所以也没有StatusBar.currentHeight这个值
第二种方式比较简单，也是我采用的方式
- 先撤销上面的所有操作。
- 修改
StatusBar的属性如下，为了看清楚效果，我把状态栏背景改为透明
<StatusBar
barStyle="dark-content" // enum('default', 'light-content', 'dark-content')
translucent={true} // 应用会延伸到状态栏之下绘制
backgroundColor="transparent"
/>
效果图如下：
而且这个时候，你还可以通过StatusBar.currentHeight这个值，在写顶部的相关样式，例如
headerTop: {
marginTop: StatusBar.currentHeight, // 内容从状态栏下面开始
},
