【问题标题】: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'} 它变成灰色

标签: 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】:

      &lt;StatusBar translucent backgroundColor="transparent" /&gt; 是要走的路,谢谢@Felipe Rugai

      但是,有两件事要知道:

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

      【讨论】:

        【解决方案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 颜色
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-01-05
        • 2019-07-10
        相关资源
        最近更新 更多