06-ReactNative文本组件Text
07-ReactNative组件状态state
08-ReactNative组件属性props
09-ReactNative输入组件TextInput
10-ReactNative图片组件Image
11-ReactNative活动指示器组件
12-ReactNative弹出框Alert
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
15-ReactNative开关组件Switch
16-状态栏组件StatusBar
17-ReactNative滚动视图ScrollView
18-ReactNative选择器Picker
19-ReactNative网络请求
React Native 状态栏组件 StatusBar
===========================================================================================
状态栏 StatusBar 就是手机屏幕最顶上一个区域，包含 运营商名称、网络情况、电池情况那一条。
暗色系
亮色系
在 React Native 中我们可以定制 状态栏 StatusBar 。当然了，说是定制，无非以下几点
显示或隐藏状态栏。 设置主题色：亮色系还是暗色系。 设置显示或隐藏时是否启用动画。
React Native 提供了 `` 组件来做上面这些事情。
引入组件
import { StatusBar } from ‘react-native’
使用语法
barStyle = “dark-content|light-content” hidden = {true|false} animated = {true|false} /> 注意 React Native 中的 StatusBar 采用覆盖规则，我们可以在一个页面中定义多个 。 后面定义的 的属性会覆盖前一个 `` 设置的属性。 … 静态方法 除了可以使用属性来设置状态栏外，React Native 中的 StatusBar 还提供了一些静态方法用来设置状态栏。 setHidden() setHidden() 用于设置显示或隐藏状态栏。 setHidden() 的函数原型如下 static setHidden(hidden: boolean, [animation]: StatusBarAnimation) 参数说明 | 参数 | 类型 | 是否必填 | 说明 | | — | — | — | — | | hidden | boolean | 是 | 是否隐藏状态栏，true 是，false 否 | | animation | StatusBarAnimation | 否 | 可选，设置显示或隐藏状态改变时的动画。 | setBarStyle() setBarStyle() 用于设置状态栏的主题色。 setBarStyle() 的函数原型如下 static setBarStyle(style: StatusBarStyle, [animated]: boolean) 参数说明 | 参数 | 类型 | 是否必填 | 说明 | | — | — | — | — | | style | StatusBarStyle | 是 | 要设置的状态栏主题色 | | animated | boolean | 否 | 主题色改变时是否动画 | 枚举常量 StatusBarStyle StatusBarStyle 枚举常量定义了状态栏可用的主题色. 值说明 | 值 | 说明 | | — | — | | default | 默认主题色，iOS 上是 dark-content ，Android 是 light-content | | light-content | 暗色的背景，亮色的文字和图标 | | dark-content | 亮色的背景，暗色的文字和图标( Android 要求 API >= 23 ) | StatusBarAnimation StatusBarAnimation 枚举常量定义了状态栏可用的动画效果。 值说明 | 值 | 说明 | | — | — | | none | 默认，没有动画效果 | | fade | 渐隐渐现动画效果 | | slide | 渐入渐出动画效果 | 范例 范例 1 下面的代码，我们设置状态栏 StatusBar 的主题色为 暗色系，同时显示状态栏。 App.js import React, { Component } from ‘react’; import { StatusBar } from ‘react-native’ const App = () => { return ( 自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。 深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！ 因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！ 由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！ 如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端） 最后的最后 面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。 需要完整面试题的朋友可以点击蓝色字体免费获取 /2024/03/13/H4lCoPEF.jpg" /> 最后的最后 面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。 需要完整面试题的朋友可以点击蓝色字体免费获取 [外链图片转存中…(img-CKnhvhsE-1712381876502)] [外链图片转存中…(img-DrGh6F93-1712381876502)] [外链图片转存中…(img-PFQUQUZ4-1712381876503)] [外链图片转存中…(img-Mr7T4Zam-1712381876503)] 参考文章
您阅读本篇文章共花了：
发表评论