属性

属性名	描述
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}><StatusBaranimated={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

转载于:https://www.cnblogs.com/hehe520/p/6329880.html

[React Native]StatusBar的使用相关推荐

react native StatusBar的简单见解
在操作statusBar遇到的一些问题: 1.statusBar的操作以最后的一次操作为准. 2.比如status的背景颜色. 今天我们继续来看一下StatusBar状态栏组件的讲解以及使用实例 ...
我如何为我的第一个自由客户构建第一个React Native应用程序
by Charlie Jeppsson 查理·杰普森(Charlie Jeppsson) 我如何为我的第一个自由客户构建第一个React Native应用程序 (How I built my firs ...
移动跨平台框架React Native状态栏组件StatusBar【16】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
大咖说：React Native 全埋点实现原理（内附赠书）
本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件.该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书). ■ 作 ...
[RN] React Native 实现类似京东的沉浸式状态栏和搜索栏
React Native 实现类似京东的沉浸式状态栏和搜索栏其原理其实就是在要隐藏部分的那个View 前面加入 StatusBar 代码! 代码如下: <StatusBaranima ...
如何在React Native中使用react-navigation 5处理导航
React-navigation is the navigation library that comes to my mind when we talk about navigation in Re ...
React Native 开发豆瓣评分（五）屏幕适配方案
前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...
React Native微信分享
捣鼓了有一段时间了,终于搞完这个微信分享的接口接入模块.直接看效果: 第一步首先你要有自己的打包签名完的项目,运行在你的手机设备上,因为后面需要用到应用签名.(具体怎么获得后面会讲解) 在自己的项目 ...
React Native从入门到实战--开发环境搭建
前言: 从今天起开启一门全新的课程学习,就是React Native,远在18年https://www.cnblogs.com/webor2006/p/9350428.html其实当时就已经做过开篇, ...
Zephyr 简介：用于 React Native 的 Tailwind CSS
使用纯 CSS 构建复杂的 Web 应用程序可能是一项艰巨的挑战. 因此,开发人员倾向于使用 Bootstrap 和 Tailwind CSS 等流行的样式库来缩短开发周期. 与 Web 上的样式类似 ...

[React Native]StatusBar的使用

属性

与Navigator搭配的用法

[React Native]StatusBar的使用相关推荐

最新文章

热门文章