[React Native]StatusBar的使用

标签: android native StatusBar
2587人阅读 评论(0) 收藏 举报
分类:

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’。

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

class AwesomeProject extends Component {

    render() {
        return (
            // 为了保重TextInput组件居中显示多用一个View包裹
            <View style={styles.container}>
                <StatusBar
                    animated={true}
                    hidden={false}
                    backgroundColor={'blue'}
                    translucent={true}
                    barStyle={'default'}
                    showHideTransition={'fade'}
                    networkActivityIndicatorVisible={true}
                />
            </View>

        );
    }
}

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

IOS运行结果:
这里写图片描述

Android运行结果:
这里写图片描述

与Navigator搭配的用法

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

 <View>
   <StatusBar
     backgroundColor="blue"
     barStyle="light-content"
   />
   <Navigator
     initialRoute={{statusBarHidden: true}}
     renderScene={(route, navigator) =>
       <View>
         <StatusBar hidden={route.statusBarHidden} />
         ...
       </View>
     }
   />
 </View>

更多精彩请关注微信公众账号likeDev
这里写图片描述

查看评论

React Native中状态栏设置StatusBar

组件介绍 StatusBar 是 React Native 用来设置并动态改变设备的状态栏显示特性。可以通过设置StatusBar的样式实现不同页面状态栏的显示。 虽然 StatusBar 是跨平台组...
  • YanceChen2013
  • YanceChen2013
  • 2017年08月21日 22:07
  • 3539

ReactNative开发——StatusBar

ReactNative开发——StatusBarStatusBar用来设置并动态改变设备的状态栏显示特性。基本属性 componentDidMount(){ window.setTim...
  • a992036795
  • a992036795
  • 2017年06月02日 16:59
  • 1173

react native StatusBar 使用详解

StatusBar 是手机顶部的状态条。 属性: animated:状态栏变化时是否使用动画。 hidden:是否隐藏状态栏。 backgroundColor:仅作用于android...
  • mengks1987
  • mengks1987
  • 2017年05月03日 17:21
  • 3016

react native StatusBar的简单见解

 在操作statusBar遇到的一些问题: 1.statusBar的操作以最后的一次操作为准。 2.比如status的背景颜色。 今天我们继续来看一下StatusBar状态栏组件的...
  • qq_14990527
  • qq_14990527
  • 2017年07月11日 17:33
  • 137

React native 沉浸式状态栏解决方案

React native 沉浸式状态栏解决方案博客上有很多的沉浸式解决方案,不过都是针对原生activity的方案。在react native中却不适用。 首先我们看一下RN中的StatusBar中...
  • u011135887
  • u011135887
  • 2017年07月10日 10:22
  • 3458

React Native之Modal组件实现遮罩层效果

React-Native中Modal的使用 /** * React Native App * dongtao 2017/04/22 * @flow */ import React, { C...
  • sinat_17775997
  • sinat_17775997
  • 2017年04月22日 18:21
  • 8052

React Native 状态栏组件

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Image, Text, T...
  • JLhaoran
  • JLhaoran
  • 2017年03月30日 16:48
  • 2967

react-native沉浸式状态栏

该StatusBar状态栏组件用来实现控制应用的状态栏的效果。根据官方文档说明了StatusBar(状态栏)和Navigator(导航器)搭配的用法: StatusBar组件可以同时加载多个组件...
  • changsimeng
  • changsimeng
  • 2017年03月29日 18:41
  • 2925

React-Native开发(三)在Android真机上调试

在设备上运行 在GitHub上修改这篇文档支持我们 前提条件:USB调试 你需要开启USB调试才能在你的设备上安装你的APP。首先,确定你已经打开设备的USB调试开关 确保你的设备已经成功连接。...
  • wds1181977
  • wds1181977
  • 2016年12月01日 09:20
  • 11133

[React Native]StatusBar的使用

StatusBar是React Native 0.20 新增的跨平台组件,它可以用来设置并动态改变设备的状态栏显示特性。虽然说是跨平台的组件, 但是有些属性不是跨平台的 ,我们需要注意下。因为IOS和...
  • yulianlin
  • yulianlin
  • 2016年08月30日 16:02
  • 2587
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 24万+
    积分: 2735
    排名: 1万+
    我的新书
    《爱上Android》已经出版
    本书绝不中庸,全是实用技术

    购买地址

    京东 天猫
    博客专栏
    最新评论