ReactNative学习---设置状态栏

最新推荐文章于 2023-10-31 15:06:21 发布
最新推荐文章于 2023-10-31 15:06:21 发布
阅读量355 收藏
点赞数
分类专栏： reactnative
原文链接：https://www.jianshu.com/p/ad580fa9b027
版权

ReactNative默认状态下在顶部会显示时间、网络、电量等信息的状态栏


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200108164818884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ajI1Ng==,size_16,color_FFFFFF,t_70)
默认显示顶部状态栏
=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ajI1Ng==,size_16,color_FFFFFF,t_70)

你会发现状态栏和你的顶部文字会重叠在一起，很丑。下面有几个方法来解决

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200108165024690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ajI1Ng==,size_16,color_FFFFFF,t_70) 设置 marginTop:20

在这里插入图片描述设置paddingTop:20

上面就是显示效果，有个顶部距离就不会重叠在一起。

方法二 给第一个元素设置paddingTop:20
在这里插入图片描述
设置paddingTop:20

在这里插入图片描述
设置paddingTop:20

如上图所示，状态栏和第一条内容的背景色一致，融在一起了。
方法三 设置StatusBar
如果在页面加一行代码，状态栏就会隐藏

在这里插入图片描述

在这里插入图片描述

隐藏顶部

此外，StatusBar还可以设置更多的属性，详情请看api文档

顶部栏文字为白色
顶部栏文字为黑色

游鱼_
关注
专栏目录
react native的插件，它为设备的电池状态添加了一个监听器
06-08
react-native-battery 一个跨平台的 React Native 模块，返回设备的电池电量/状态。 支持iOS和安卓。 包安装 npm install react-native-battery --save iOS 自动设置 react-native 链接 react-native-battery Android 设置 react-native 链接 react-native-battery 可能会工作，但有时会删除文件。 如果自动安装失败，请使用以下手动步骤。 在 MainApplication.java 中添加：import com.rctbattery.BatteryManagerPackage； // ... @Override 受保护列表 getPackages() { 返回数组。 asList( new MainReactPackage(), new BatteryManagerPackage(), // ... ); 添加到android/settings.gradle: include ':react-native-battery' project(':
React Native 中的状态栏(Android沉浸式)
Android 开发架构
05-29 1813
在实际项目中，我们常常需要根据页面的不同去修改状态栏的表现。例如：页面头部图片延伸到状态栏下并且状态栏透明；状态栏的颜色和标题栏的颜色相同；状态栏内容颜色的深浅变化。 在此之前，我写了一篇React Navigation 构建 Android 和 iOS 统一的 UI的文章，里面简单的说到了 Android 状态栏的一些设置。后来我发现并不是我想的那么简单，因此通过这篇博客进行补充，文中会更加详...
基于React动态图标组件、电池电量、计时器（倒计时）
jt11166的博客
05-16 1535
react-little-icon 提供一些动态图标控件，比如电池电量、计时器 源码地址(Source address) 安装（Install） npm install react-little-icon --save Battery - 电池电量使用（Usage） 参数（props） size：<String> 大小，默认 50px，支持 vw, em, rem ...
React-Native状态栏组件（StatusBar）的使用详解
热门推荐
suwu150
11-01 1万+
StatusBar 是手机顶部的状态条。StatusBar 是 React Native 0.20 起新增的跨平台组件，它可以用来设置并动态改变设备的状态栏显示特性。React-Native项目可以同时加载多个 StatusBar 组件，这些 StatusBar 组件的属性可以按照加载的顺序进行合并。一种常见的用法就是：我们可以在使用 Navigator 的时候，针对不同的路由页面设置特殊的状态栏样式。
android 7.0 获取电量,android平台通过Native.js获取电池电量等信息
weixin_39803022的博客
05-26 241
代码如下//需要添加权限 function listen_Battery(){try{var main = plus.android.runtimeMainActivity(); //获取activityvar Intent = plus.android.importClass('android.content.Intent');var receiver;recevier = plus.andro...
react-native-chat-demo-master.zip_DEMO_React_react native_react
09-21
《React Native聊天应用实战解析与学习指南》 React Native，由Facebook开发并开源，是一种用于构建原生移动应用程序的框架，它允许开发者使用JavaScript和React来编写应用，并且可以跨平台运行在iOS和Android上。...
react-native-maps-demo：react-native-maps-demo
02-17
在实际开发中，React Native Maps Demo项目不仅帮助我们理解如何使用React Native Maps库，还展示了如何组织代码结构、处理异步操作和状态管理，这些都是构建复杂React Native应用不可或缺的部分。通过学习和研究这...
react-native-auto-collapsible
04-11
在 "react-native-auto-collapsible-master" 压缩包中，包含了库的源代码，开发者可以通过查看源码学习其工作原理，或者在遇到问题时进行调试。源码可能包括 TypeScript 定义的组件、样式表、示例代码以及测试文件等...
react-native-chat-ui
03-06
1. **React Native组件**：React Native的基础是组件化开发，Chat UI库中包含了各种预设的组件，如`ChatMessage`（消息单元）、`InputToolbar`（输入工具栏）、`MessageBubble`（消息气泡）等。每个组件都是独立的，...
react-native-instagram-clone:instagram与世博会克隆
03-14
在这个项目中，“react-native-instagram-clone”是一个基于React Native的Instagram应用的克隆版，旨在帮助开发者理解和学习如何使用React Native来构建类似Instagram的应用程序。 **React Native基础知识** ...
android 显示电池电量
weixin_30293135的博客
11-02 146
原文引入：http://blog.csdn.net/it_farmer2010/article/details/6334051 没事的时候，记得多学一点，每天进步一点点，好让自己跟上这个每天在变化的技术环境，话不多说，上代码。 直接上代码吧。 package com.jli.battery; import android.app.Activity; import android.conte...
react-native利用Switch控制手机状态栏
宏斌的博客
05-06 606
样式 ``animated动画 使用方式：比如要一个View组件产生动画效果用一个Animated.View组件代替View，里面正常写内容，然后需要发生变化的样式的值要用Animated.Value()指定，设置一个函数用来更改该样式的值来产生动画效果， 如果要让View的宽度从100在1000毫秒内变成300可以这样 //先定义一个值保存需要变化的样式的值 this.state = { ...
【React native】状态栏设置
最新发布
爱孔孟
10-31 328
也暴露了一个静态 API。然而不推荐大家同时通过静态 API 和组件来定义相同的属性，因为静态 API 定义的属性值在后续的渲染中会被组件中定义的值所覆盖。控制应用程序状态栏的组件。状态栏是一个区域，通常位于屏幕顶部，显示当前时间、Wi-Fi 和蜂窝网络信息、电池电量和/或其他状态图标。可以在任意视图中加载，可以放置多个且后加载的会覆盖先加载的。因此在配合导航器使用时，请务必考虑清楚。有些场景并不适合使用组件，因此。
react-native实现假象的水印
paceBX的博客
03-26 767
react-native实现假象的水印 主要代码块 一： import React, { Component } from "react"; import { View, Text, Dimensions, StyleSheet, ViewPropTypes } from 'react-native'; import PropTypes from 'prop-types'; const WIDTH = Dimensions.get('window').width const HEIGH
React-Native 状态栏设置
圣人男的博客
04-04 3189
import React, { Component } from 'react';import {    Platform,    StyleSheet,    View,    StatusBar} from 'react-native';import ETTHeaderStyles from  '../res/styles/ETTHeaderStyles';export class ETTL...
react native常用插件
wxl1390的博客
08-09 879
react native常用插件
react-native 启动界面全屏设置 隐藏系统状态栏
weixin_42262889的博客
06-18 4314
android启动页怎么设置全屏显示了？ import android.os.Bundle; // here import com.facebook.react.ReactActivity; // react-native-splash-screen >= 0.3.1 import org.devio.rn.splashscreen.SplashScreen; // here // reac...
React Native实现自定义顶部导航栏
ｎｅｗｘｃ
04-22 1744
效果 import React, {Component} from 'react'; import { Platform, StatusBar, StyleSheet, Text, View, ViewPropTypes, } from 'react-native'; import PropTypes from 'prop-types'; import DeviceInfo from 'react-native-device-info'; const NAV_BAR_HEIGHT
react-native沉浸式状态栏
chanzhu的博客
03-29 8953
该StatusBar状态栏组件用来实现控制应用的状态栏的效果。根据官方文档说明了StatusBar(状态栏)和Navigator(导航器)搭配的用法： StatusBar组件可以同时加载多个组件，该组件的属性可以按照加载的顺序进行合并。一种常见的用法就是:我们可以在使用Navitator的时候，针对不同的路由页面进行设置特殊的状态栏样式。具体可以看一下官方实例代码: ?
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值