- React Native 教程
- React Native - 主页
- 核心概念
- React Native - 概述
- React Native - 环境设置
- React Native - 应用程序
- React Native - 状态
- React Native - 道具
- React Native - 样式
- React Native - Flexbox
- React Native - 列表视图
- React Native - 文本输入
- React Native - 滚动视图
- React Native - 图像
- 反应本机 - HTTP
- React Native - 按钮
- React Native - 动画
- React Native - 调试
- React Native - 路由器
- React Native - 运行 IOS
- React Native - 运行 Android
- 组件和 API
- React Native - 查看
- React Native - WebView
- React Native - 模态
- React Native - 活动指示器
- React Native - 选择器
- React Native - 状态栏
- React Native - 开关
- React Native - 文本
- React Native - 警报
- React Native - 地理定位
- React Native - 异步存储
- React Native 有用资源
- React Native - 快速指南
- React Native - 有用的资源
- React Native - 讨论
React Native - 状态栏
在本章中,我们将向您展示如何在 React Native 中控制状态栏的外观。
状态栏易于使用,您只需设置属性即可更改它。
hide属性可用于隐藏状态栏。在我们的示例中,它设置为false。这是默认值。
barStyle可以具有三个值 – dark -content、light-content和default。
该组件还有其他几个可以使用的属性。其中一些是 Android 或 IOS 特定的。您可以在官方文档中查看。
应用程序.js
import React, { Component } from 'react'; import { StatusBar } from 'react-native' const App = () => { return ( <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/> ) } export default App
如果我们运行该应用程序,状态栏将可见,并且内容将呈深色。