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 )和部分踩坑