[React Native]StatusBar的使用
来源:互联网 发布:微信打印软件 编辑:程序博客网 时间:2024/05/22 00:55
StatusBar是React Native 0.20 新增的跨平台组件,它可以用来设置并动态改变设备的状态栏显示特性。
虽然说是跨平台的组件, 但是有些属性不是跨平台的 ,我们需要注意下。因为IOS和Android本身有些区别,使用这个组件最好都要适配的。
属性
Android:
IOS:
属性比较简单,直接看例子:
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
0 0
- [React Native]StatusBar的使用
- react native StatusBar 使用详解
- react native StatusBar的简单见解
- React Native中状态栏设置StatusBar
- 【React Native开发】- React Navigation的使用
- 【React native】Webview的使用
- react native ref的使用
- React native Webview的使用
- react-native的简单使用
- react native Linking的使用
- react native navigator 的使用
- React Native FlatList的使用
- react native 定时器的使用
- react native 全局变量的使用
- react-native SectionList的使用
- react-native的使用教程
- react-native的WebView使用
- react-native中抽屉的使用(react-native-drawer)
- Android代码混淆工具Proguard学习
- 【数据结构与算法学习笔记】PART5 图
- 学习自定义view哪里强,csdn找启舰
- idea2016 配置tomcat
- Oracle Form 问题集锦 - 点击某Form显示未找到任何数据(ORA-01403)
- [React Native]StatusBar的使用
- 小知识点 清除浮动
- 深入浅出struts2
- iOS---解决Cannot synthesize weak property in file using manual reference counting
- วิอัลลี่ เชื่อมั่น ดิบาล่า เป็น เตเบซ คนใหม่ได้แน่
- 什么才是真正的 RESTful 架构
- vimcaps插件补充
- ISE约束控制
- 硬币问题