StatusBar是React Native 0.20 新增的跨平台组件,它可以用来设置并动态改变设备的状态栏显示特性。

虽然说是跨平台的组件, 但是有些属性不是跨平台的 ,我们需要注意下。因为IOS和Android本身有些区别,使用这个组件最好都要适配的。

属性

属性名 描述
animated 布尔类型,用来设定颜色样式改变或者隐现时是否有动画,默认false
hidden 布尔类型,用来设定颜色样式改变或者隐现时是否有动画,默认false

Android:

Android特有属性 描述
backgroundColor Android设备上状态栏的背景颜色
translucent 布尔类型,状态栏是否半透明,如果为true,应用将从物理顶端开始显示

IOS:

IOS特有属性 描述
barStyle 取值为default(默认)或light-content,用来设定状态栏的文字颜色
networkActivityIndicatorVisible 布尔类型,设定网络活动指示器(就是那个菊花)是否显示在状态栏
showHideTransition fade’, ‘slide’二选一,通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为’fade’。

属性比较简单,直接看例子:

  1. class AwesomeProject extends Component {
  2. render() {
  3. return (
  4. // 为了保重TextInput组件居中显示多用一个View包裹
  5. <View style={styles.container}>
  6. <StatusBar
  7. animated={true}
  8. hidden={false}
  9. backgroundColor={'blue'}
  10. translucent={true}
  11. barStyle={'default'}
  12. showHideTransition={'fade'}
  13. networkActivityIndicatorVisible={true}
  14. />
  15. </View>
  16. );
  17. }
  18. }

这份代码既有Android独有属性,也有IOS独有属性,在不同的平台下表现不一样,

IOS运行结果:

Android运行结果:

与Navigator搭配的用法

StatusBar组件可以同时加载多个。此时属性会按照加载顺序合并(后者覆盖前者)。一个典型的用法就是在使用Navigator时,针对不同的路由指定不同的状态栏样式,如下:

  1. <View>
  2. <StatusBar
  3. backgroundColor="blue"
  4. barStyle="light-content"
  5. />
  6. <Navigator
  7. initialRoute={{statusBarHidden: true}}
  8. renderScene={(route, navigator) =>
  9. <View>
  10. <StatusBar hidden={route.statusBarHidden} />
  11. ...
  12. </View>
  13. }
  14. />
  15. </View>

更多精彩请关注微信公众账号likeDev

[React Native]StatusBar的使用的更多相关文章

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

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

  2. React Native APP结构探索

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

  3. React Native 常见问题集合

    在使用React Native时候,我记录下比较常遇到的问题,分为以下几类: 1. 调试问题 2. 写法问题 3. 疑难问题 4. 奇怪问题 调试问题 1. 在react-native run-and ...

  4. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  5. WEB通知和React Native之即时通讯(iOS Android)

    WEB通知和React Native之即时通讯(iOS Android) 一,需求分析 1.1,允许服务器主动发送信息给客户端,客户端能监听到并且能接收. 1.2,为了方便同一个系统内的用户可以指定某 ...

  6. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  7. React Native 常用插件案例

    (二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...

  8. React Native 项目实战 -- DoubanProject

    引言:本文是我研究react-native时写的一个简单的demo,代码里有详细的注释,好废话不多说,直接上代码. 1.项目目录 2.index.android.js /** * index.andr ...

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

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

随机推荐

  1. Leetcode98. Validate Binary Search Tree验证二叉搜索树

    给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当前节点的数. 所有左子树和右子树自身必须也是二叉搜索 ...

  2. 使用线程 Monitor.Wait() 和 Monitor.Pulse()

      Wait() 和 Pulse() 机制用于线程间交互.当在一个对象上使用Wait() 方法时,访问这个对象的线程就会一直等待直到被唤醒.Pulse() 和 PulseAll() 方法用来通知等待的 ...

  3. 区块链、云计算、大数据、人工智能、FinTech带来的挑战与机遇,中国技术开放日上海站精彩回顾

    区块链.云计算.大数据.人工智能.FinTech带来的挑战与机遇,中国技术开放日上海站精彩回顾 | 作者 韩婷 发布于 2016年12月26日. 估计阅读时间: 不到一分钟 | 欲知区块链.VR.Te ...

  4. Prime Ring Problem HDU - 1016 (dfs)

    Prime Ring Problem HDU - 1016 A ring is compose of n circles as shown in diagram. Put natural number ...

  5. http方式nginx 访问不带www的域名301重定向跳转到www的域名帮助seo集中权重

    比如我需要吧gucanhui.com重定向301跳转到www.gucanhui.com 需要在nginx的con发文件中加入一段 server { listen ; server_name gucan ...

  6. day38 04-Spring加载配置文件

    Spring的工厂类ApplicationContext有两个子类:ClassPathXmlApplicationConext和FileSystemXmlApplication都可以用来加载配置文件. ...

  7. NOIP模拟赛 17.10.10

    初次见面(firstmeet)[题目背景]雾之湖边,静得可怕.露米娅出神凝望.黑白连衣裙,像极了绽放的墨黑和洁白的莲.身边的雾之湖,倒映着血色天空.酒红的双眸,映照一切.低声浅笑,双臂伸直,她悄无声息 ...

  8. Leetcode63.Unique Paths II不同路径2

    一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为" ...

  9. excel之VLOOKUP函数的使用

    VLOOKUP 函数是excel中比较常用的一个函数.该函数具有有四个参数: 1.查找值:指本表中的值,需要根据本表中的某一值在本表或其他表中查找我们想要获取的值就称为查找值. 2.数据表:指查找的范 ...

  10. 基于遗传算法(Genetic Algorithm)的TSP问题求解(C)

    基于遗传算法的TSP问题求解(C) TSP问题: TSP(Travelling salesman problem): 译作“旅行商问题”, 一个商人由于业务的需要,要到n个城市,每个城市之间都有一条路 ...