如何使状态栏透明？答案

【问题标题】：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

标签： android react-native statusbar

【解决方案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 stackoverflow 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 颜色