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

其原理其实就是在要 隐藏 部分的那个View 前面加入 StatusBar 代码!

代码如下:

<StatusBar
animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式:backgroundColor, barStyle和hidden
hidden={false} //是否隐藏状态栏。
backgroundColor={'transparent'} //状态栏的背景色
translucent={true} //指定状态栏是否透明。设置为true时,应用会在状态栏之下绘制(即所谓“沉浸式”——被状态栏遮住一部分)。常和带有半透明背景色的状态栏搭配使用。
barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')
>
</StatusBar>

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/10888943.html

转载请著名出处!谢谢~~

[RN] React Native 实现 类似京东 的 沉浸式状态栏和搜索栏的更多相关文章

  1. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

  2. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  3. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  4. [RN] React Native 常见基本问题归纳总结

    [RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...

  5. [RN] React Native 关闭所有黄色警告

    [RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...

  6. [RN] React Native 幻灯片效果 Banner

    [RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...

  7. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

  8. 81.Android之沉浸式状态栏攻略

    转载:http://blog.csdn.net/lmj623565791/article/details/48649563/ 一.概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下:本篇博客 ...

  9. Android 沉浸式状态栏攻略 让你的状态栏变色吧

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/48649563: 本文出自:[张鸿洋的博客] 一.概述 近期注意到QQ新版使用了 ...

随机推荐

  1. 【题解】整数划分 [51nod1201] 整数划分 V2 [51nod1259]

    [题解]整数划分 [51nod1201] 整数划分 V2 [51nod1259] 传送门:整数划分 \([51nod1201]\) 整数划分 \(V2\) \([51nod1259]\)** [题目描 ...

  2. JQuery EasyUI Tree组件的Bug记录

    记录一下使用项目中使用EasyUI遇到的bug,废话少说直接上菜  - _-(bug)..... bug ::   .netcore创建一个web应用时候,会自动引入jQuery库以及一些插件,但是在 ...

  3. 防止用iframe调用网页dom元素

    <system.webServer> <httpProtocol> <customHeaders> <add name="X-Frame-Optio ...

  4. spark任务分配----TaskSchedulerImpl源码解析

    TaskSchedulerImpl 上一篇讲到DAGScheduler根据shuffle依赖对作业的整个计算链划分成多个stage之后,就开始提交最后一个ResultStage,而由于stage之间的 ...

  5. vs2017 添加 mysql EF实体数据模型闪退

    1.查看vs2017安装路径找到Mysql.Data.dll版本号与MySQL Connector Net版本是否一致 历史版本下载地址 http://mysql.inspire.net.nz/Dow ...

  6. Java语法知识点

    1. 特殊字符 a) \n   换行符 b)  \t   制表符 <--------------------------------------------------------------- ...

  7. js对数组array的常见操作小结

    1.创建数组?两种方式 var arr = new Array("1","2","4"); var arr1 = ["1" ...

  8. Python 数学运算的函数

    不需要导入模块(内置函数) 函数 返回值 ( 描述 ) abs(x) 返回绝对值 max(x1, x2,...) 最大值,参数可以为序列. min(x1, x2,...) 最小值,参数可以为序列. p ...

  9. 自定义View(三),仿支付宝芝麻信用自定义控件

    仿支付宝的芝麻信用仪表盘 实现的效果 实现的功能: 指针和数字动态改变 背景动态变化 没了... 代码如下 MyCustomView.java package com.example.testcust ...

  10. 动态路由 RIP

    不同网段之间进行通信,中间有多个路由器的情况下,我们可以通过配置RIP动态路由来实现数据转发. 实验拓扑 如图所示连接,地址规划如下: 名称 接口 IP地址 R1 f0/0 192.168.10.1/ ...