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

react-native StatusBar透明的更多相关文章

  1. [React Native]StatusBar的使用

    StatusBar是React Native 0.20 新增的跨平台组件,它可以用来设置并动态改变设备的状态栏显示特性. 虽然说是跨平台的组件, 但是有些属性不是跨平台的 ,我们需要注意下.因为IOS ...

  2. React Native组件之ScrollView 和 StatusBar和TabBarIos

    React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下: /** * Sample React Native App * https: ...

  3. [RN] React Native 实现 类似京东 的 沉浸式状态栏和搜索栏

    React Native 实现 类似京东 的 沉浸式状态栏和搜索栏 其原理其实就是在要 隐藏 部分的那个View 前面加入 StatusBar 代码! 代码如下: <StatusBar anim ...

  4. React Native中自定义导航条

    这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的 ...

  5. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  6. React Native组件介绍

    1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...

  7. React Native:使用 JavaScript 构建原生应用

    [转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...

  8. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  9. React Native 之 Touchable 介绍与使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  10. React Native APP结构探索

    APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...

随机推荐

  1. Cpython和Jython的对比介绍

    CPython 当我们从Python官方网站下载并安装好Python 3.x后,我们就直接获得了一个官方版本的解释器:CPython.这个解释器是用C语言开发的,所以叫CPython.在命令行下运行p ...

  2. canvas绘制工作流之绘制节点

    上一篇我们介绍了canvas绘制工作流的大概步骤,接下来会有系列文章细致的介绍怎么用canvas绘制工作流:这篇文章主要介绍用canvas绘制流程节点. 绘制前我们需要先准备一张节点图片,例如::好了 ...

  3. MySQL使用查看表SELECT语句

    来源:实验楼 本节实验中学习了 SELECT 语句的常用方法: 基本语法 数学符号条件 AND OR IN 通配符 排序 SQL 内置函数和计算 子查询与连接查询 输入命令,下载代码: git clo ...

  4. win7/win10系列的office安装与激活

    Windows系列电脑安装office傻瓜式教程 一.    下载与安装 下载 (1).所需工具:迅雷 下载链接:http://xl9.xunlei.com/ 显示界面如下,点击“立即下载”即可,然后 ...

  5. 简单的倒叙应用---倒序打印字符串(C语言)

    void reverseStr(char* str){ if(*str=='\0'){ return; } reverseStr(str+1); printf("%c\n",*st ...

  6. nyoj 4 ASCII码排序

    ASCII码排序 时间限制:3000 ms  |  内存限制:65535 KB | 难度:2   描述 输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符.   输入 第一 ...

  7. hdu 1878 欧拉回路(联通<并查集> + 偶数点)

    欧拉回路Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. linux图形界面 KDE、GNOME

    1.Linux图形桌面系统组成(由上往下层次结构) 窗口管理器——Enlightenmen.icewm.Fvwm.window-maker 桌面环境———Gnome.KDE.CDE X WINDOW— ...

  9. element表格点击行即选中该行复选框

    关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...

  10. ES6的基础知识(一)

    1.ECMAScript 6.0(以下简称ES6). 2.ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的其中一种实现. 3.对ES6支持的浏览器:超过 90% ...