react-native StatusBar透明

目錄

• 一 react-native 自定義AppStatusBar
• 二 配置
  • android

一 react-native 自定義AppStatusBar

透明 StatusBar字體黑色， 否則是白色字體

import React from 'react';
import PropTypes from 'prop-types';
import { StatusBar } from 'react-native';

const AppStatusBar = (props) => {
  const { transparent } = props;
  return (
    <StatusBar
      barStyle={transparent ? 'dark-content' : 'light-content'}
      translucent
      backgroundColor="rgba(0, 0, 0, 0)"
    />
  );
};

AppStatusBar.defaultProps = {
  transparent: false,
};

AppStatusBar.propTypes = {
  transparent: PropTypes.bool,
};

export default AppStatusBar;

二 配置

android

android/app/src/main/res/values/styles.xml

兼容android劉海屏幕

<resources>

    <!-- Base application theme. -->
    <style name="ImageTranslucentTheme" parent="AppTheme">
        <!-- Customize your theme here. -->

        <!-- Android 4.4 API 19 透明狀態欄 -->
        <item name="android:windowTranslucentStatus">true</item>
        <!-- API21 Android 透明狀態欄 -->
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

</resources>

參考：
1. 終於搞懂令人迷惑的 StatusBar 了
2. Android 系統UI狀態欄設置
3. Android 沉浸式( Translucent System Bar )和部分踩坑