RN Android 沉浸式

Kilin_Zhang

于 2021-07-08 15:21:22 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react native

本文链接：https://blog.youkuaiyun.com/zhang_7150/article/details/118574369

React 专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何使Android状态栏变得透明，并设置背景颜色为透明。同时，它演示了如何获取当前状态栏的高度，这对于自定义布局和UI设计至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

StatusBar.setTranslucent(true);

StatusBar.setBackgroundColor('transparent');

// 获取状态栏高度

StatusBar.currentHeight

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Kilin_Zhang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

腾讯 android ui,腾讯开源的Android UI框架——QMUI Android

weixin_35110758的博客

05-27

1652

各位同学，早上好，我是你们的老朋友D_clock爱吃葱花，前些天忙着发版本，最近也在看各种各样的新知识，有好多东西想写啊啊啊啊啊。嗯，先冷静捋一下，卖个关子。扯回正题，今天继续为大家推荐一个Github上的开源框架——QMUI Android，出品自腾讯广州研发部QMUI团队。https://github.com/QMUI如果是做Web开发的同学，应该会很熟悉QMUI所开源的QMUI Web框架，...

android如何实现支付宝,（Android集成支付宝支付）react-native实现支付宝支付

weixin_29062671的博客

05-28

1324

网上关于RN的支付宝支付组件大部分都是IOS的，Android要实现支付宝支付只剩下走原生这一步了。整体思路：1、在蚂蚁金服开放平台申请应用2、在android原生集成支付宝3、封装android原生4、RN与android的通信一、准备工作1、在蚂蚁金服开放平台https://docs.open.alipay.com/204/105051/按照官方提示创建应用，添加app支付的功能。2、在审核...

参与评论您还未登录，请先登录后发表或查看评论

[RN] React Native 实现类似京东的 沉浸式状态栏和搜索栏

weixin_30505043的博客

05-19

368

React Native 实现类似京东的 沉浸式状态栏和搜索栏其原理其实就是在要隐藏部分的那个View 前面加入 StatusBar 代码！代码如下： <StatusBar animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden hidden=...

React Native实现沉浸式状态栏（兼容Android和iOS）

z372574152的博客

03-14

5139

实现沉浸式状态栏的关键就是使用RN官方提供的StatusBar。实现步骤可以分为以下两步：（1）自定义StatusBar的行为；（2）在自定义Header中使用封装好的StatusBarComp；在开始实现前，需要明确一点，StatusBar在两个平台上的表现是有差异的。首先，在项目中，为了Header的自由度，我往往会自定义一个Header组件，而不是使用react-navigati...

React Native 中的状态栏(Android沉浸式)

Android 开发架构

05-29

2035

在实际项目中，我们常常需要根据页面的不同去修改状态栏的表现。例如：页面头部图片延伸到状态栏下并且状态栏透明；状态栏的颜色和标题栏的颜色相同；状态栏内容颜色的深浅变化。在此之前，我写了一篇React Navigation 构建 Android 和 iOS 统一的 UI的文章，里面简单的说到了 Android 状态栏的一些设置。后来我发现并不是我想的那么简单，因此通过这篇博客进行补充，文中会更加详...

react native沉浸式(透明)状态栏与标题导航栏

chaosunabc的博客

12-16

8503

最近要做一款APP，需要同时兼容Android和IOS,因对Android和IOS原生开发都不熟悉，为了尽快完成，最终敲定用react native来实现(虽然对react native也是小白)。 APP中有几个页面的头部设计跟微信朋友圈的头部相似，状态栏和标题栏是透明的，能清楚看到下面的图片，这里需要用到状态栏和标题栏的沉浸式设置。要让状态栏透明该怎么办呢？首先我就想到了将背景色设置成t...

react-native沉浸式导航栏

RN_David的博客

08-17

1233

react-native沉浸式导航栏什么是沉浸式导航栏？打开这个链接，或者百度自行百度一下提前说明一下沉浸式导航栏只存在于安卓中，下面说一说设置方式，总共分为两种，一是安卓原生设置，二是react-native设置。安卓原生设置这个请自行百度 react-native设置 rn提供一个statusbar组件，通过设置背景设置透明就能实现沉浸式导航栏，详细代码如下： <StatusBar translucent={true} backgroundColor="transpare

记录RN开发中遇到的兼容性问题

01-20

渲染沉浸式状态栏在Android上可能被原生状态栏样式覆盖。需要在`componentDidMount`生命周期方法中使用`StatusBar` API来改变状态栏样式。 ```javascript componentDidMount() { StatusBar.setTranslucent(true...

React native 沉浸式状态栏解决方案

热门推荐

u011135887的博客

07-10

1万+

React native 沉浸式状态栏解决方案博客上有很多的沉浸式解决方案，不过都是针对原生activity的方案。在react native中却不适用。首先我们看一下RN中的StatusBar中的属性： translucent bool ：指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。 js中调

react-native-status-bar-size:观看并响应iOS状态栏高度的变化

03-29

React本机状态栏大小观看并响应iOS状态栏高度的变化。将其添加到您的项目运行npm install react-native-status-bar-size --save 请按照以下示例在JS中使用它过时的change事件 change事件已弃用。应该改用didChange事件。它仍然可用，但可能会在以后的版本中删除。例子 var MyApp = React . createClass ( { getInitialState : function ( ) { return { currentStatusBarHeight : StatusBarSizeIOS . currentHeight , } ; } , componentDidMount : function ( ) { StatusBarSizeIO

ReactNative——如何隐藏状态栏（实现沉浸式）

萌鼠喝酸奶的博客

07-31

8635

RN中隐藏状态栏的方式很简单，在页面的根布局的顶部添加一个StatusBar即可，设置相关属性如下： <StatusBar backgroundColor='#ff0000' translucent={true} hidden={true} animated={true}/> 例如： export default class MainP...

React Native 沉浸式标题栏与安卓全面屏适配

qq_42185834的博客

05-26

7231

一：RN标题栏的适配很简单，官方提供了一个原生组件，可以设置标题栏背景之类的<StatusBar backgroundColor={'#e34451'} />二：全面屏适配，参考文档：https://android-developers.googleblog.com/2017/03/update-your-app-to-take-advantage-of.html 全面屏...

react-native沉浸式状态栏

chanzhu的博客

03-29

9030

该StatusBar状态栏组件用来实现控制应用的状态栏的效果。根据官方文档说明了StatusBar(状态栏)和Navigator(导航器)搭配的用法： StatusBar组件可以同时加载多个组件，该组件的属性可以按照加载的顺序进行合并。一种常见的用法就是:我们可以在使用Navitator的时候，针对不同的路由页面进行设置特殊的状态栏样式。具体可以看一下官方实例代码: ?

react-native 状态栏沉浸式问题

weixin_41177814的博客

08-02

1617

react-native 状态栏沉浸式问题目的：防止状态栏无缘无故从 沉浸式 变成非沉浸式 （给自己的笔记）遇到的问题应用在后台长时间运行突然进入—（沉浸式的状态栏 —自动—> 没有沉浸式）从通知栏进入的应用—（沉浸式的状态栏 —自动—> 没有沉浸式）解决方 android\app\src\main\res\values\styles.xml <res...

沉浸式 几行代码轻松搞定

浅若清兮

05-17

781

找到 values 下 style 文件：代码如下<resources>  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your the...

沉浸式状态栏技术方案及其中的一些坑

马克宅只是个码农

06-27

7080

1. 沉浸式状态栏 沉浸式状态栏是android 4.4开始支持的一个feature，在软件打开的时候通知栏和软件顶部颜色融为一体，这样不仅可以使软件和系统本身更加融为一体，而且让用户注意力更加集中在内容上。在ios上这是一个很早就支持的功能，但在android上则一直只能看到黑色的状态栏。因为在刚来公司不久后遇到的我的空间一次改版，设计稿上就是按着ios的样子做的，而android

RN android实现下载安装apk