美文网首页
react-native 状态栏

react-native 状态栏

作者: 暴躁程序员 | 来源:发表于2023-11-13 10:18 被阅读0次

React Native 中的 StatusBar 采用覆盖规则,可以在一个页面中定义多个 StatusBar,后面定义的 StatusBar 的属性会覆盖前一个 StatusBar 设置的属性

一、StatusBar 组件常用属性

1. 是否隐藏状态栏(支持 Android和IOS):hidden 属性,值为:true、false
2. 设置状态栏样式(支持 Android和IOS):barStyle 属性,值为:default、dark-content、light-content
3. 是否支持动画(支持 Android和IOS):animated 属性,值为:true、false
4. 设置背景色(仅 Android):backgroundColor 属性,值为:色值字符串
5. 是否透明(仅 Android):translucent 属性,值为:true、false

二、 StatusBar 示例

import React from 'react';
import {StyleSheet, Text, View, StatusBar} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <StatusBar
        hidden={false} // 
        barStyle={'dark-content'} // 
        animated={false} // 
        backgroundColor="transparent" // 
        translucent={true} // 仅 Android
      />
      <Text>hello world</Text>
      <Text>仅 Android 支持,状态栏高度:{StatusBar.currentHeight}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'pink',
    paddingTop: StatusBar.currentHeight,
  },
});

export default App;

相关文章

  • react-native 的状态栏

    其实对于 react-native 来说,官方自带的 StatusBar 已经足够使用了。iOS 系统的状态栏是比...

  • react-native 安卓完全沉浸式状态栏实现(标签导航)

    此篇教程会持续更新。。。 react-native安卓简单沉浸式状态栏实现 使用的导航是react-navigat...

  • 工作笔记六

    react-native ios和android的兼容性问题: IOS的顶部状态栏(显示手机电池的顶部菜单栏)默认...

  • 状态栏

    一、沉浸式状态栏(没有状态栏了) 二、半透明状态栏 三、白色状态栏,修改状态栏颜色 调用

  • React Native资料

    React-Native学习指南 Awesome React-Native系列 教程 react-native 官...

  • React Native资料

    React-Native学习指南 Awesome React-Native系列 教程 react-native 官...

  • 收集的React-native相关资源

    React-native部分 React-native 中文网 React-native 英文官网 React N...

  • 沉浸式、MVP、MVVM

    1.沉浸式状态栏 获取状态栏的高度,然后把toolbar的高度加上状态栏的高度,再设置状态栏透明设置状态栏透明: ...

  • iOS 状态栏的隐藏显示与状态栏样式的设置

    iOS 状态栏的隐藏显示与状态栏样式的设置 iOS 状态栏的隐藏显示与状态栏样式的设置

  • 隐藏状态栏

    隐藏状态栏 这里面分两种情况:1.全局隐藏状态栏;2.部分页面隐藏状态栏。 全局隐藏状态栏 如果想全局隐藏状态栏,...

网友评论

      本文标题:react-native 状态栏

      本文链接:https://www.haomeiwen.com/subject/mitdwdtx.html