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. SQL系列(四)—— 唯一值(distinct)

    有时需要查询某列上的不重复的数据,如: SELECT name FROM student; 结果: name lxy lxy lxy lxy 这样的结果显然不符合我们的需求.如何对列数据进行去重,查询 ...

  2. 使用Dbvisualizer 连接 Elasticsearch

    Dbvisualizer 安装 从网上下载该软件,并破解激活 下载地址:http://www.ddooo.com/softdown/142713.htm 1.下载解压,得到dbvisualizer p ...

  3. python字符串的拼接

    方式一:使用"+"拼接(拼接字符串较多时会影响拼接效率) 方式二:使用","拼接(只能用于print打印,赋值操作会生成元组) 方式三:使用"%&qu ...

  4. Java之四大元注解@Target、@Retention、@Documented、@Inherited

    什么叫做元注解??   ==>用于注解[注释]的注解就叫做元注解 注解叫做:元数据,标签,注释           元注解[数据]--->注解--->标记代码 1.@Target : ...

  5. VSCode 命令

    淘宝 NPM 镜像     https://npm.taobao.org/ Ctrl+~   显示终端 npm start    启动项目 cnpm install   安装模块

  6. C#MVC中ViewData和ViewBag的使用

    ViewBag和ViewData的区别 ViewData ViewBag 它是key/value字典集合 它是dynamic类型对象 从asp.net mvc1就有了 从asp.netmvc3才有 基 ...

  7. C# Linq 使用总结

    隐式类型匿名类型自动属性初始化器委托泛型泛型委托匿名方法Lambda表达式扩展方法迭代器LINQ System.Linq var arr = new[] { "c", " ...

  8. 谈谈游戏服务端SDK接入

    “接sdk其实本质上就是一个对着接口文档写adaptor的工作,重复和无味.” 团队减员,身负多职,上一次调SDK已经可以回溯到游戏测试前夕了... 一般SDK只包含验证和支付功能,绝少部分SDK包含 ...

  9. 【漏洞复现】Apache Solr via Velocity template远程代码执行

    0x01 概述 Solr简介 Apache Solr 是一个开源的企业级搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现.Apache Solr ...

  10. MySQL的JOIN连接

    MySQL的JOIN join的含义跟英文单词"join"一样,连接连接两张表.分为 内连接:inner join 外连接   (1)左外连接(左边的表不加限制):left joi ...