react-native 沉浸式状态栏

最新推荐文章于 2024-07-04 17:34:33 发布

小白的成长之路_

最新推荐文章于 2024-07-04 17:34:33 发布

阅读量797

点赞数

本文链接：https://blog.youkuaiyun.com/XiaoZhuang__/article/details/100763816

版权

本文介绍了如何在React-Native应用中实现沉浸式状态栏，通过在MainActivity中、res-values-styles文件及入口页面添加相应代码，调整状态栏字体颜色和透明度，确保在深色背景下的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多少，先上图

1.首先要在MainActivity中加入一段代码

@Override
protected void onCreate(Bundle savedInstanceState) {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = this.getWindow();
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    window.setStatusBarColor(Color.TRANSPARENT);
    window.setNavigationBarColor(Resources.getSystem().getColor(android.R.color.background_dark));
  } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    Window window = this.getWindow();
    window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  }
  super.onCreate(savedInstanceState);
}

2.在res-values-styles加入一段代码

3.在react-native入口页面加入一段代码

//用于改变状态栏字体的颜色，不然如果是黑色背景，那么状态栏字体也是黑色，就会显示不出来。

StatusBar.setBarStyle('light-content'); StatusBar.setTranslucent(true);

资源----路径https://download.youkuaiyun.com/download/xiaozhuang__/11716198