ReactNative学习---设置状态栏

最新推荐文章于 2023-10-31 15:06:21 发布
最新推荐文章于 2023-10-31 15:06:21 发布
阅读量352 收藏
点赞数
分类专栏： 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 中的状态栏(Android沉浸式)
Android 开发架构
05-29 1798
在实际项目中，我们常常需要根据页面的不同去修改状态栏的表现。例如：页面头部图片延伸到状态栏下并且状态栏透明；状态栏的颜色和标题栏的颜色相同；状态栏内容颜色的深浅变化。 在此之前，我写了一篇React Navigation 构建 Android 和 iOS 统一的 UI的文章，里面简单的说到了 Android 状态栏的一些设置。后来我发现并不是我想的那么简单，因此通过这篇博客进行补充，文中会更加详...
react-native状态栏
diaojw090的博客
04-01 238
转载
【React native】状态栏设置
最新发布
爱孔孟
10-31 323
也暴露了一个静态 API。然而不推荐大家同时通过静态 API 和组件来定义相同的属性，因为静态 API 定义的属性值在后续的渲染中会被组件中定义的值所覆盖。控制应用程序状态栏的组件。状态栏是一个区域，通常位于屏幕顶部，显示当前时间、Wi-Fi 和蜂窝网络信息、电池电量和/或其他状态图标。可以在任意视图中加载，可以放置多个且后加载的会覆盖先加载的。因此在配合导航器使用时，请务必考虑清楚。有些场景并不适合使用组件，因此。
自定义顶部三格状态栏(React Native)
weixin_43294560的博客
08-31 278
使用方法: 给组件传入三个对应方法,方法返回react元素 leftItem:PropTypes.func, middleItem:PropTypes.func, rightItem:PropTypes.func import React,{Component} from 'react' import PropTypes from 'prop-types' import { View, Text, StyleSheet, Dimensions,
React Native状态栏组件StatusBar
weixin_44759289的博客
05-08 433
状态栏StatusBar就是手机屏幕最顶上的一个区域，包含运营商名称，网络情况，电池情况那一条暗色系 import React, { Component } from 'react'; import {View, Text, StatusBar, StyleSheet, TouchableOpacity} from 'react-native' class App extends Component { state = { hidden:false, //状态栏样式
移动跨平台框架React Native状态栏组件StatusBar【16】
江咏之
04-20 1273
前端江太公 React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。 React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-.
react-native-maps-demo：react-native-maps-demo
02-17
在实际开发中，React Native Maps Demo项目不仅帮助我们理解如何使用React Native Maps库，还展示了如何组织代码结构、处理异步操作和状态管理，这些都是构建复杂React Native应用不可或缺的部分。通过学习和研究这...
react-native-chat-demo-master.zip_DEMO_React_react native_react
09-21
《React Native聊天应用实战解析与学习指南》 React Native，由Facebook开发并开源，是一种用于构建原生移动应用程序的框架，它允许开发者使用JavaScript和React来编写应用，并且可以跨平台运行在iOS和Android上。...
react-native-instagram-clone:instagram与世博会克隆
03-14
在这个项目中，“react-native-instagram-clone”是一个基于React Native的Instagram应用的克隆版，旨在帮助开发者理解和学习如何使用React Native来构建类似Instagram的应用程序。 **React Native基础知识** ...
react-native-onboarding-screen:如何使用React Native制作入职屏幕对新手而言
05-19
使用隐藏状态栏 使用react-native-swiper刷卡图像。 让我们一边编码一边听音乐！ 跟着我！ 面子书： : 面子书： : 使用的软件：VSCode，React Native，Expo - 音乐 - 曲目：Bloom-在[NCS发行]中播放，由...
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-UI-Templates-main-源码.rar
10-10
6. **第三方库**：源码中可能引用了诸如react-navigation（导航）、react-native-vector-icons（图标）等第三方库，学习如何集成和使用这些库可以扩展应用功能。 7. **原生模块**：React Native允许与原生代码交互...
react-native试玩(33)-状态栏API
doctorq
09-08 5106
StatusBarIOS 方法 名称 意义 setStyle 设置样式 setHidden 设置隐藏 setNetworkActivityIndicatorVisible 设置网络小菊花是否可见 实例 'use strict';var React = require('react-native'); var { StyleSheet, View, Text,
React-Native状态栏组件（StatusBar）的使用详解
热门推荐
suwu150
11-01 1万+
StatusBar 是手机顶部的状态条。StatusBar 是 React Native 0.20 起新增的跨平台组件，它可以用来设置并动态改变设备的状态栏显示特性。React-Native项目可以同时加载多个 StatusBar 组件，这些 StatusBar 组件的属性可以按照加载的顺序进行合并。一种常见的用法就是：我们可以在使用 Navigator 的时候，针对不同的路由页面设置特殊的状态栏样式。
React-Native 状态栏设置
圣人男的博客
04-04 3187
import React, { Component } from 'react';import {    Platform,    StyleSheet,    View,    StatusBar} from 'react-native';import ETTHeaderStyles from  '../res/styles/ETTHeaderStyles';export class ETTL...
react-native 启动界面全屏设置 隐藏系统状态栏
weixin_42262889的博客
06-18 4301
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...
iOS不显示状态栏（电池和信号栏）
2019想做自己的游戏的人加群95303036
12-21 5064
//隐藏状态栏 - (BOOL)prefersStatusBarHidden { return YES; } 在viewcontroller里面加入
基于React动态图标组件、电池电量、计时器（倒计时）
jt11166的博客
05-16 1525
react-little-icon 提供一些动态图标控件，比如电池电量、计时器 源码地址(Source address) 安装（Install） npm install react-little-icon --save Battery - 电池电量使用（Usage） 参数（props） size：<String> 大小，默认 50px，支持 vw, em, rem ...
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...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值