React Native 沉浸式状态栏和导航栏


最近开始接触 React Native 的开发工作,对原生开发基本不了解,里面很多大大小小的坑。这次开发内容不是很复杂,数据交互不是非常多,主要是页面的布局。

如何实现一个顶部隐藏状态栏并显示导航栏的页面?

产品图片

实现方式

  1. 使用Image实现图片的显示,这里的图片最好使用ImageBackground组件,区别是ImageBackground可以嵌套其他组件

  2. 导航栏,我一开始是使用绝对定位的方式进行模拟的,但是越想越不对,实现肯定是有问题的,果然在navigationOptions中找到了headerTransparent属性,使用它,导航栏就可以实现透明显示。

  3. 状态栏透明显示:

    StatusBar.setBackgroundColor("transparent");
    StatusBar.setTranslucent(true);

可用参考示例

沉浸式状态栏

参考文章

  1. React Native 中的状态栏
  2. react native 沉浸式(透明)状态栏与标题导航栏

文章作者: Yao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Yao !
 上一篇
编码点滴:第一期 编码点滴:第一期
本周遇到几个有意思的问题。下面一一记录。 (css)使用flex布局,如何保证上下行之间间距,并且最后一行和容器空间为0 元素之间使用margin-bottom保持距离,最后一行元素的距离,使用外层的负margin抵消 (r
2019-12-08
下一篇 
weex兼容本地图片 weex兼容本地图片
做 weex 开发时候,不能使用本地图片,比较难受,必须使用网络图片。那么能不能本地开发的图片自动转成网络图片? 兼容本地图片实现本地图片都存放在/src/image 文件夹,通过 tool.getImage(“logo.png”) 访问图
2019-07-05
  目录