ChargEco/Strides-SPAPP/app/components/MyStatusBar.js

/**
 * 自定义状态栏(Android)
 * @邠心vbe on 2023/02/15
 */
import React, { Component } from 'react';
import { StatusBar } from 'react-native';

let statusBar;
export default class MyStatusBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      statusTheme: "dark-content", //themeStatusBar,
      statusColor: "transparent", //colorPrimaryDark,
      isTranslucent: true
    };
    statusBar = this;
  }

  static DARK_STYLE = "dark-content";
  static LIGHT_STYLE = "light-content";
  static DEFAULT_STYLE = themeStatusBar;

  /**
   * 设置状态栏颜色
   * @param {String} color 颜色值
   */
  static setStatusBarColor(color) {
    statusBar.setStatusBarColor(color);
  }

  /**
   * 设置状态栏主题(字体图标颜色)
   * @param {String} theme 主题：MyStatusBar.DARK_STYLE, MyStatusBar.LIGHT_STYLE
   */
  static setStatusBarTheme(theme) {
    statusBar.setStatusBarTheme(theme);
  }

  /**
   * 设置状态栏主题和颜色
   * @param {*} theme 主题：MyStatusBar.DARK_STYLE, MyStatusBar.LIGHT_STYLE
   * @param {*} color 颜色
   */
  static setStatusBarThemes(theme, color="transparent") {
    statusBar.setStatusBarThemes(theme, color);
  }

  /**
   * 设置透明状态栏
   */
  static setTranslucentStatusBar() {
    statusBar.setStatusBarThemes(MyStatusBar.DARK_STYLE, "transparent", true);
  }

  setStatusBarColor(color) {
    this.setState({
      statusColor: color
    })
  }

  setStatusBarTheme(theme) {
    this.setState({
      statusTheme: theme
    })
  }

  setStatusBarThemes(theme, color, trans=true) {
    this.setState({
      statusColor: color,
      statusTheme: theme,
      isTranslucent: trans
    })
  }

  render() {
    return (
      <StatusBar
        barStyle={this.state.statusTheme}
        translucent={this.state.isTranslucent}
        backgroundColor={this.state.statusColor}/>
    );
  }
}