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. nginx部署angular

    官方部署教程 本文将angular官网的示例项目 heroes(英雄指南) 部署到nginx. 使用angular cli编译项目 ng build 执行完成后会生成一个 dist 目录. 服务器配置 ...

  2. winform datagridview控件使用

    最近做项目时,显示查询结果总需要绑定到datagridview控件上显示,总结了给datagridview绑定数据的方式,以及导出datagridview数据到excel表格,如有错误请多指教 1.直 ...

  3. django中navie时间和aware时间详解

    navie时间和aware时间: 什么是navie时间?什么是aware时间? navie时间:不知道自己的时间表示的是哪个时区的.也就是不知道自己几斤几两.比较幼稚. aware时间:知道自己的时间 ...

  4. HeRaNO's NOIP CSP Round Day 2 T2 PESTC

    对于我这种菜鸡来说还是挺有迷惑性的. 在考场发现答案问的是跟最值有关的数量,想到二分,结果果然具有单调性,考虑二份答案+验证 其实什么反转什么的,可以不用去管他,对于长度小于二分答案mid的道路,不去 ...

  5. 换个语言学一下 Golang (11)——使用包和测试

    Go天生就是为了支持良好的项目管理体验而设计的. 包 在软件工程的实践中,我们会遇到很多功能重复的代码,比如去除字符串首尾的空格.高质量软件产品的特点就是它的部分代码是可以重用的,比如你不必每次写个函 ...

  6. CSS文本居中问题

    文本水平居中 水平居中比较简单,将对应的html元素text-align属性值为center,其子元素就会水平居中. 文本垂直居中 单行文本垂直居中 设置文本元素的line-height属性值为元素高 ...

  7. Redux 中间件和异步操作

    回顾一下Redux的数据流转,用户点击按钮发送了一个action,  reducer 就根据action 和以前的state 计算出了新的state, store.subscribe 方法的回调函数中 ...

  8. Java 之 ArrayList 集合

    一.ArrayList 概述 java.util.ArrayList  是 大小可变的数组 的实现,存储在内的数据称为元素.该类是一个 集合类(容器),可以让我们更便捷的存储和操作对象数据. 该类可以 ...

  9. 微信小程序分页加载列表

    1.假设加载的数据为 2.wxml <view class="page"> <view class="page__bd"> <vi ...

  10. Python 栈、队列的实现

    在python中,列表既可以作为栈使用,又可以作为队列使用. 把列表作为栈使用 栈:后进先出 stack=[1,2,3] stack.append(4) #入栈,以列表尾部为栈顶 print(stac ...