随着时代的发展,Android的状态栏都不是乌黑一片了,在Android4.4之后我们可以修改状态栏的颜色或者让我们自己的View延伸到状态栏下面。...我们可以进行更多的定制化了,然而有的时候我们使用的是淡色的颜色比如白色,由于状态栏上面的文字为白色,这样的话状态栏上面的文字就无法看清了。...因此本文提供一些解决方案,可以是MIUI6+,Flyme4+,Android6.0+支持切换状态栏的文字颜色为暗色。...修改Android6.0+ Android 6.0开始,谷歌官方提供了支持,在style属性中配置android:windowLightStatusBar 即可, 设置为true时,当statusbar...的背景颜色为淡色时,statusbar的文字颜色会变成灰色,为false时同理。
/page/PopularPage'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import TrendingPage.../page/FavoritePage'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import React...from 'react'; import {DefaultTheme, NavigationContainer} from '@react-navigation/native'; const Tab
const tabNames = [{name: 'Java'}, {name: 'Android'}, {name: 'ios'}]; ....//中间部分...
这个属性虽然也可以在 Android 5.0 及其以后版本的手机上使用,但是效果不是我们想要的。...在 Android 4.4 之前是不支持透明状态栏 需要注意的一点是在设置透明状态栏的情况下,是需要我们的内容布局延伸到状态栏的,因此这个时候使用 fitSystemWindows 这个属性是没有意义的...,那么在 Android 4.4 以下的手机上运行的话,那么效果就很糟糕了,因为 Android 4.4 以下的手机,系统状态栏都是始终存在的,也就是说,这样始终比 Android 4.4 以上系统的手机布局多一块...Android 5.0 到了 Android 5.0 关于状态栏又发生了变化,新增了直接对状态栏的操作,直接改变状态栏颜色,这一点在之前版本是没有的,Android 4.4 虽然可以实现改变状态栏颜色的效果...Android5.0透明no.png Android 6.0 在 Android 6.0 添加了可以更改状态栏字体颜色的方法,别的都是和 Android 5.0 一样的。 状态栏字体颜色默认是白色。
体验了 QQ 浏览器,因为网页大多都是纯白的,在 6.0 的手机上状态栏背景纯白,图标文字改成黑的了,但在 5.1 的手机上图标文字没法改,它是把背景做成灰色的了。...6.0 以下无法改状态栏图标文字颜色,只能控制颜色不要太白。...// isLightStatusBarAfter23 控制是否更改状态栏图标文字颜色 int flag = isLightStatusBarAfter23 ?...statusBarColorBefore23); view.setLayoutParams(params); view.setTag(TAG_KITKAT); // 加个Tag,下次直接获取该 View 更改颜色...5.0 和 6.0 手机上的效果: ?
React-Native 部分组件在debug模式下打包在iOS真机上可以显示,但是release模式下打包在iOS真机上不显示 ? 显示 ?...不显示 这个问题真的是卡了我好久,只要是打release包,下面的按钮组就是不显示,而release包又不能调试,于是我终于在忍无可忍的情况下,一直不能打包然后一点一点的展示在页面上,来看到底是哪里的问题...React-Native 启动时报错 - “no bundle url present” 原因 我运行了react-native run-android看了一下安卓环境下的图标的样式,然后使用react-native...解决 于是我就在iOS模拟器正在运行期间执行了: npm install react-native run-ios zz,一遍还不行,试了两遍才正常了!!!...也就是下面这个页面不要关,保持在最前面就好了。 ?
三、框架搭建 1)添加必要依赖 在命令行输入以下代码 yarn add react-navigation yarn add react-native-scrollable-tab-view 当然,以上代码可以用...color是为了给项目设置主题颜色,边框颜色和背景颜色的 export default { theme: '#06C1AE', border: '#e0e0e0', background...: '#f3f3f3' } 引入需要的文件 在RootScene文件中,引入四个主界面和封装好的TabBarItem组件以及React框架必须的组件 import React, { Component...四、状态栏的设置 从原型图上可以看出,只有当页面跳转在’首页‘和’我的‘两个页面时,状态栏的样式是亮色,其余时候都呈现了黑色。...要设置状态栏必须先导入StateBar组件 import { StatusBar } from 'react-native' 构造函数中,先将所有页面状态栏的状态都设置为亮色。
一、使用说明 相似功能的插件,不推荐全都装上,请挑选一个使用 本列表所有插件均已测试使用过,但不代表不存在问题 任何插件本身的问题,请到对于代码仓库提交issue 二、拓展 名称 简述 Auto Close...展示代码结构树 Code Runner 运行选中代码段(支持多数语言) Code Spellchecker 单词拼写检查 CodeBing 快速打开Bing并搜索,可配置搜索引擎 Color Highlight 颜色值在代码中高亮显示...emoji endy 将输入光标跳转到当前行最后面 ESLint ESLint插件,高亮提示 File Peek 根据路径字符串,快速定位到文件 filesize 状态栏显示当前文件大小 Find-Jump...快速跳转到指定单词位置 Font-awesome codes for html FontAwesome提示代码段 ftp-sync 同步文件到ftp Git Blame 在状态栏显示当前行的Git信息...Native Storybooks storybook预览插件,支持react React Playground 为编辑器提供一个react组件运行环境,方便调试 React Standard Style
---- 一、手机平台相关文档 (一)小米 1、小米开发者文档 2、开发人员必看:《小米应用开发者文档》 在这里可以找到在小米手机上开发、分发应用的相关文档~ 3、常见问题 4、小米帐号场景化登录...---- 7、关于华为手机App权限更改导致应用重启的坑(暂且我还没有很好的解决方式) 问题重现: 1.当我们在华为手机上打开一个应用,将应用退至后台进程中。...---- 二、开发中遇到的问题在不同手机上的处理方式 (一)沉浸式状态栏适配 这里讲一下华为手机沉浸式状态栏和虚拟键盘冲突问题怎么解决: 由于指数限制,详细代码请看我的github https:/...在MIUI V6及以上版本,调用MIUI的方法将状态栏图标改为黑色。发现部分小米手机,这样的设置不管用,导致头上一片白,状态栏上的东西基本看不到。...(四)改变状态栏字体颜色为黑色的适配 2.4.1 小米适配 /** * 改变小米的状态栏字体颜色为黑色,要求MIUI6以上 * tested on: MIUI V7 5.0 Redmi-Note3
= null) { actionBar.hide(); } 透明顶部状态栏 状态栏默认的颜色是绿色的,很丑,更改颜色可以在theme中修改对应主题的颜色。...当然,个人认为透明状态栏最为美观,下面是实现方式: 1、在gradle中添加依赖 api 'com.readystatesoftware.systembartint:systembartint:1.0.3...WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); } } /** * 修改状态栏颜色...else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { //使用SystemBarTint库使4.4版本状态栏变色...* 可以用来判断是否为Flyme用户 * * @param window 需要设置的窗口 * @param dark 是否把状态栏文字及图标颜色设置为深色
这些扩展将为你的编辑器添加一系列颜色,并使代码块易于辨别,一旦你习惯了它们,如果 VSCode 没有它们就会让人觉得很平淡。...它以明亮的颜色突出代码中的 “TODO/FIXME” 或代码任何其他注释,以便始终清晰可见。...当你更改相同的标签时,关闭标记会自动更改,这两个扩展就是这样做的。 它还适用于JSX和许多其他语言,如XML,PHP,Vue,JavaScript,TypeScript,TSX。...Git Blame — 它允许您在状态栏中查看当前所选行的Git Blame信息。 GitLens也提供了类似的功能。...Git Indicators — 它允许你查看受影响的文件以及状态栏中添加或删除的行数。
android中沉浸式状态栏的文章已经满大街了,可是在实现某些效果时,还是得各种搜索,测试一通后,最后还常常满足不了要求,即使好不容易在一部手机上满足了需求,放在另外一手机上,发现效果还各种不适配。...,故不能使用android:fitsSystemWindows属性,故在实现上面效果时带有底部导航栏手机上就会存在一个大坑,解决办法见第3章节。...而对于第一个首页和第四个我的fragment,则需要布局的图片填充到状态栏底下,而标题栏要位于状态栏下方,这其实只需要一种取巧实现,一般手机状态栏高度都是在25dp左右,当然在代码中动态获取状态栏高度,...感兴趣的小伙伴可以参下:android沉浸式状态栏、fitsSystemWindows、标题栏折叠 下面我们说说怎么在界面滑动时,修改状态栏和标题栏文字颜色。...这个主要通过监听AppBarLayout滑动的距离,向上滑动,如果大于标题栏的高度,则要动态改变标题栏文字颜色,当标题栏折叠时,改变状态栏文字颜色及返回铵钮图标,同时状态栏文字颜色变成暗色。
2,编写库库代码 这里比较简单,就是实现一个简单的沉侵式状态栏。沉侵式状态栏默认支持到4.4版本(5.0以后是系统默认支持的,对于5.0之前的是通过绘制一个和状态栏大小相等的矩形)。...activity.getWindow().setStatusBarColor(calculateStatusColor(color, statusBarAlpha)); 这里有一个方法是技术状态栏的颜色...{ //alpha(0-255) public static final int DEFAULT_STATUS_BAR_ALPHA = 112; /** * 设置状态栏颜色..., int color) { setColor(activity, color, DEFAULT_STATUS_BAR_ALPHA); } /** * 设置状态栏颜色...后记 其实这都是很简单的东西,只是个人习惯的问题,最近也开始想React Native转了,有兴趣的可以关注我的博客和我的开源项目。
只好继续寻寻觅觅,又找到另一个电商App,它在Android6.0手机上也完美实现了状态栏悬浮效果,但是在Android4.4手机运行时仍然没能覆盖状态栏。...该电商App的首页截图如下所示,其中左图为Android6.0手机上的运行界面,此时状态栏浮在轮播图上面;右图为Android4.4手机的运行界面,此时状态栏依旧与轮播图泾渭分明。 ? ?...虽然主页面已经和状态栏重叠在了一起,没法强行把它俩拆散,但我们可以叫主页面让一让,不要跟状态栏挨得这么紧,就是给主页面设置一段顶端空白topMargin,表示主权在我、不妨让你三尺,于是主页面让出一段空白...对于Android4.4,情况还会更加特殊,因为系统没有提供设置状态栏颜色的方法,所以只能手工搞个假冒的状态栏来占坑。...先将这个冒牌状态栏(其内部没有别的控件)染上开发者指定的颜色,然后与系统自带的状态栏重合,于是乎偷梁换柱仿佛给状态栏换了一件衣裳。
假设我们正在制作一个网页,在每次单击按钮时,我们都想绘制一个笑脸。但是绘制这个笑脸需要很多计算资源。因此,我们告诉 React 使用回调来记住如何绘制笑脸。...现在,每次单击按钮时,React 都会“记住”如何绘制笑脸,而不会使用额外的资源。...useCallback(drawSmiley, []);// 现在,每次我们想要绘制笑脸,我们只需使用 rememberDrawSmiley考虑依赖项将 useCallback 想象成你的机器人朋友的一个魔法笔记本,...但是如果发生重要的变化(比如天气变化),机器人就知道需要用新的指令更新它的笔记本。这样,你的机器人总是完美地建造沙堡,使用最少的资源,而你们俩都有更多的时间在海滩上玩耍和享受快乐!...钩子用于根据天气确定盒子的颜色 // 依赖项数组包括 'weather',这意味着这个 useCallback // 只有在 'weather' 改变时才会重新计算。
当你更改相同的标签时,关闭标记会自动更改,这两个扩展就是这样做的。 它还适用于JSX和许多其他语言,如XML,PHP,Vue,JavaScript,TypeScript,TSX。...Git Blame — 它允许您在状态栏中查看当前所选行的Git Blame信息。 GitLens也提供了类似的功能。...Git Indicators — 它允许你查看受影响的文件以及状态栏中添加或删除的行数。...以下是引入 Fira Code 后在 VSCode 辊更改该字体的方法。...彩虹缩进 (indent-rainbow) 缩进风格,这个扩展为文本前面的缩进着色,在每个步骤中交替使用四种不同的颜色。
APP端之所以能够更改状态栏的颜色、导航栏的颜色,其实还是操作自己的View更改UI。...下面就来分析一下,APP层的API如何影响SystemUI的显示的,并一步步解开所谓沉浸式与全屏的原理,首先看一下如何更改状态栏颜色。...先看下关键点1跟2 ,这里是根据SystemUI的配置决定是否显示状态栏背景颜色,如果状态栏都不显示,那就没必要显示背景色了,其次,如果状态栏显示,但背景是透明色,也没必要添加背景颜色,即不满足(color...隐藏了状态栏 以上是DecorView对状态栏的添加机制,总结出来就是一句话:只要状态栏/导航栏不设置隐藏,设置颜色就会有效。...DecorView级别的WindowInsets消费 默认样式Activity的状态栏是有颜色的,如果内容直接扩展到状态栏下方,一定会被覆盖掉,系统默认的实现是在DecorView的根布局上加了个padding
修改状态栏字体颜色为深色 ? ? 设置状态栏和导航栏透明度 ? ? ? 解决EditText和软键盘的问题 ? ?...android 5.0以上核心代码 Android自5.0起,为我们提供了设置状态栏和导航栏颜色的API,我们可以自己设置状态栏和导航栏的颜色。...本框架在android5.0以上就是采用官方api完成的,网上关于5.0以上的实现基本都是这样,在这里就不多说了,在这里只说一点,就是设置颜色的时候不是直接填入开发者传入的颜色值,而是采用v4包下的ColorUtils.blendARGB...原理如此,发现SystemBarTint库的实现就是在状态栏和导航栏的位置自定义了可以改变背景颜色的view,然后通过window.getDecorView()得到根布局,把刚才创建的view添加进去,...状态栏字体颜色 沉浸式原理说完了,在看看状态栏字体颜色怎么去修改吧,在android 6.0以上系统为我们提供了相关的api来设置状态栏字体颜色,如下 if (Build.VERSION.SDK_INT
filesize在底部状态栏左侧,显示当前文件大小,没啥用 Live Server快速启动本地服务器,注意只对.html和.htm文件有效。...【js文件】 language-stylus CSS预处理器,styl后缀文件的识别扩展 【styl文件】 filesize 在底部状态栏左侧,显示当前文件大小,还可以点击 【全局】...不进行AI开发的人员,无需安装) Bracket Pair Colorizer2 每一对括号不同颜色 (太受欢迎,vscode已内置此功能) VS Code ES7 React/Redux/React-Native...(安装prettier后,prettier就会更改此项。...由于我只希望在Vcode中使用JDK11版本,在实际项目中的配置不变,所以配置 java.configuration.runtimes "java.home": "C:/Program Files/
顾名思义,Auto Rename Tag可以在一个标签更改时自动更新另一个标签: 这款扩展不仅可以在HTML中使用,也可用于React,因为React使用了JSX: 上述示例中标签内只有一个文本,但是在真正的应用程序中...Bracket Pair Colorizer 这款扩展可以将匹配的括号染成相同的颜色。.../Redux/GraphQL/React-Native snippets Vue 3 Snippets 例如,在React中创建新组建时,输入函数式组件的语法非常繁琐。...你不需要每次共享VSCode屏幕时更改设置,只需要创建新的用户配置即可。...其他值得一提的功能有: 遍历某个文件的历史版本 在行尾显示当前行的作者信息,而不会对工作造成干扰 自定义状态栏,显示当前行的上次修改者和修改日期 总结 本文介绍了10款VSCode扩展,帮助你成为更好的开发者并提高生产力