RN Android 沉浸式

Kilin_Zhang

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

阅读量261

点赞数

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

5142

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

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

Android 开发架构

05-29

2039

在实际项目中，我们常常需要根据页面的不同去修改状态栏的表现。例如：页面头部图片延伸到状态栏下并且状态栏透明；状态栏的颜色和标题栏的颜色相同；状态栏内容颜色的深浅变化。在此之前，我写了一篇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

1250

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

8636

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

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

qq_42185834的博客

05-26

7232

一：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

最新发布

03-13

React Native (RN) 实现 Android 平台上的下载并安装 APK 的功能是一个比较复杂的过程，涉及到文件的网络请求、存储权限处理以及通过Intent启动系统的安装界面等步骤。以下是简化的实现流程： ### 1. 下载APK 首先需要构建一个可以发起HTTP GET 请求的功能用于从服务器获取APK 文件，并将其保存到设备本地。 ```jsx import {PermissionsAndroid, Platform} from 'react-native'; import RNFS from 'react-native-fs'; // 检查并申请必要的权限（对于Android来说） async function requestFileSystemPermission() { if (Platform.OS !== "android") return true; const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE; let hasPermission = await PermissionsAndroid.check(permission); if (!hasPermission){ const granted = await PermissionsAndroid.request( permission, { title: "外部储存空间访问", message: "此应用需获得您的同意才能写入数据" } ); // 用户拒绝授权会返回never_ask_again 或 denied... return granted === PermissionsAndroid.RESULTS.GRANTED; }else{ return true; } } const downloadApk = async url => { try { // 确认有无权限 const hasPermision = await requestFileSystemPermission(); if(!hasPermision){ console.log("用户未授予读取或写入存储卡的权限"); return false; } const fileName = `downloadedFile.apk`; const localFilePath = `${RNFS.DownloadDirectoryPath}/${fileName}`; await RNFS.downloadFile({ fromUrl: url, toFile: localFilePath }).promise; console.log(`成功将文件下载至 ${localFilePath}`); return localFilePath; } catch(error) { throw new Error('Error downloading file:', error.message) } }; ``` 这里我们用了`react-native-permissions`库来简化了对系统权限的操作，而`react-native-fs`则提供了一套API来进行文件操作包括创建目录、删除文件等等。注意，在实际的应用环境中应该更谨慎地处理用户的许可情况并且给定恰当的信息告知他们为什么我们需要这样的权限。 ### 2. 安装APK 一旦完成了下载过程之后就可以继续引导用户去完成安装动作啦！由于安全原因，默认情况下安卓不允许非官方渠道来源的应用程序直接安装。因此你需要先让用户开启允许未知源应用程序这一选项，同时也要保证你正在运行的是8.0及以上版本的安卓操作系统时还需动态注册provider组件。接下来就是利用intent打开系统自带的应用管理器进行下一步了: ```js import IntentLauncher from '@codler/react-native-intent-launcher'; function installApp(filePath:string):void { // 对于API Level >= 24 需要使用 FileProvider 来分享文件 var intentData = ''; if(parseInt(DeviceInfo.getApiLevel()) < 24){ intentData = filePath; } else { // 使用file:// URI可能导致SecurityException异常所以推荐采用content://的形式代替之。 const authority =`${DeviceInfo.getBundleId()}.provider`; const uri = RNFetchBlob.wrap(localFilePath); intentData =uri ; } IntentLauncher.openURL( `package:${authority}` ).catch(e =>console.error(e)); } ``` 以上提供的是一种较为通用的方式来进行APP更新包分发与安装。如果你希望得到更好的用户体验的话建议考虑其他更为成熟稳定的第三方解决方案如：[CodePush](https://microsoft.github.io/code-push/) 或者 [Expo Updates](https://docs.expo.dev/build-reference/variables/#using-updates-in-production)，它们都支持热更新机制能够帮助开发者快速部署新特性或者修复漏洞而不必每次都经历完整的发布周期。