【第22期】观点:IT 行业加班,到底有没有价值?

[React Native]StatusBar的使用

原创 2016年08月30日 16:02:56

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 是手机顶部的状态条。 属性: animated:状态栏变化时是否使用动画。 hidden:是否隐藏状态栏。 backgroundColor:仅作用于android...

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

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

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

React Native组件之ScrollView 和 StatusBar和TabBarIos

React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下: 1 2 3 4 5 ...

从零学React Native之05混合开发

本篇文章,我们主要讨论如何实现Android平台的混合开发.RN给Android端发送消息首先打开Android Studio, Open工程, 在React Native项目目录下选择android...

从零学React Native之10Text

在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中。虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么...

[Android]Space控件的应用场景

Space控件是在Android 4.0中加入,是个空白的view,一般用于填充View组件中的间隙。support-v4包里提供了兼容低版本的Space控件。源码分析Space控件源码非常简单,先来...

使用新版Android Studio检测内存泄露和性能

内存泄露,是Android开发者最头疼的事。可能一处小小的内存泄露,都可能是毁于千里之堤的蚁穴。 怎么才能检测内存泄露呢?网上教程非常多,不过很多都是使用Eclipse检测的, 其实1.3版本以后的...

React Native-组件的引用

之前文章中,我们使用了许多React Native组件,也定义了一些组件。但是我们都没有定义组件的标识,我们都是通过回调方法处理组件对应的事件,这种情况能满足绝大多数需求,有些情况我们需要对组件进行操...

Android Studio解决导入项目非常慢的问题

Android Studio比Eclipse ADT有巨大的优势。 Android Studio原生支持使用Gradle来构建项目,使用动态语言Groovy定义项目构建的过程,避免了build.xm...

从零学React Native之06flexbox布局

前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的,这一篇文章,重点介绍下flexbox布局。什么是flexbox布局React中引入了flexbox概念,fle...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)