react-native StatusBar透明

最新推荐文章于 2021-03-28 09:10:34 发布

weixin_30414245

最新推荐文章于 2021-03-28 09:10:34 发布

阅读量317

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/qiqi715/p/10413821.html

版权

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

转载于:https://www.cnblogs.com/qiqi715/p/10413821.html