如何使状态栏透明？

Posted 2023-04-18

【中文标题】如何使状态栏透明？

【英文标题】：How to make StatusBar transparent?

【发布时间】：2019-02-24 21:41:24

【问题描述】：

有人知道用 React Native 让 android 状态栏透明的方法吗？

不半透明，透明。

我也在使用 react-navigation。

【问题讨论】：

你在使用 react-navigation 吗？

是的，我编辑了我的问题。谢谢。

尝试使用<StatusBar translucent=true backgroundColor='transparent' />

它变得半透明和透明。这意味着背景位于状态栏下方。我真正需要的是状态栏继续存在（translucent="false"），但使用 backgroundColor='transparent' 它变成灰色

看这里github.com/react-navigation/react-navigation/issues/12

【参考方案1】：

只需像这样使用它： 测试：“react-native”：“0.60.4”和“0.61.5”

<StatusBar translucent backgroundColor="transparent" />

【讨论】：

我已经尝试过了，它在 ios 中运行良好，但在 android 中却不行（StatusBar._updatePropsStack: Color transparant parsed to null or undefined）

透明还是透明？

根据react native docs，reactnative.dev/docs/statusbar#translucent-android，translucent默认为false，所以需要设置为translucent=true

【参考方案2】：

这在 android 上对我有用

<StatusBar
   backgroundColor="transparent"
   translucent=true
/>

【参考方案3】：

除非您将状态栏用作组件，否则请尝试此方法。

useFocusEffect(
    useCallback(() => 
      StatusBar.setBarStyle("dark-content");
      Platform.OS === 'android' && StatusBar.setBackgroundColor('transparent');
      StatusBar.setTranslucent(true);
    , []),
  );

别忘了给最外面的View一些paddingTop。

【参考方案4】：

<StatusBar translucent backgroundColor="transparent" /> 是要走的路，谢谢@Felipe Rugai

但是，有两件事要知道：

如果您使用来自react-native-elements 的<Header /> 组件，则它已经包含<StatusBar />，请改用其statusBarProps。 如果你使用WIX react-native-navigation，他们有单独的方式来处理状态栏，参考this和this。他们说它与 React Native 不兼容，但是，看起来它们对我来说很好用。 此外，another *** topic 解决方案中讨论的 android 本机代码/配置将被 <StatusBar /> 覆盖，因此无法正常工作。

【参考方案5】：

如果您在谈论操作系统的状态栏（下拉以访问 wifi/蓝牙/设置等），请尝试将其添加到 MainActivity.java：

private void hideNavigationBar() 
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);

你可以从同一个 MainActivity.java 调用这个函数中的那个^函数

@Override
protected void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);
    hideNavigationBar();

但是，如果您在谈论应用的状态栏，请尝试将其添加到您的 App.js 文件中

static navigationOptions = 
    header: null

【讨论】：

这两种方法都没用。 static navigationOptions = header: null 这应该隐藏工具栏/顶部栏而不是状态栏。

【参考方案6】：

您可以使用StatusBar.setBackgroundColor(Colors.TRANSPARENT);进行设置

【讨论】：

这没有任何意义

【参考方案7】：

试试这个在android中制作透明状态栏

container: 
      flex:1,
      paddingTop: 20
    ,

将 display flex 和 paddingTop 添加到您的主 View 组件

【讨论】：

flex size & padding 与状态栏无关。

【参考方案8】：

在 react native 中，如果您使用 expo，您可以转到 app.json 文件并添加状态栏颜色。之后整个应用的状态栏背景颜色会发生变化。

"androidStatusBar": 
  "backgroundColor": "#105846"
,

检查链接页面。

【讨论】：

这在我看来根本不是 HEX 颜色