react native 状态栏和安全区域的使用
1. 状态栏组件,react native文档提供了说明。我需要的是设置透明效果,如下图。
代码如下
<StatusBar translucent={true} backgroundColor="rgba(0, 0, 0, 0)" />
解释:StatusBar设置在哪个页面,加载该页面时才会生效。而且作用全局。我们的项目需要,仅仅是透明就可以,我就在登陆界面设置就可以。
2. 安全区域,react native文档提供了safeAreaView,但有问题目前支持IOS,不兼容Android 。我使用了react-navigation里提供的safeAreaView,会导致状态栏透明修过不对。最后采用了第三方库。
react-native-safe-area-view 中它提供的safeAreaView。
最后总的代码
import * as React from 'react';
import { View,Text, StatusBar, Button, StyleSheet,ImageBackground } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'; // 导入 SafeAreaProvider ,包裹根组件路由
import { SafeAreaProvider } from 'react-native-safe-area-context';
// 包裹组件
import SafeAreaView from 'react-native-safe-area-view'; function Screen1({ navigation }) {
return (
<SafeAreaView style={[styles.container]}>
<StatusBar translucent={true} backgroundColor="rgba(0, 0, 0, 0)" />
<ImageBackground style={[styles.imgBackground]} source={require('./img/my_img_bg.png')}>
<Text>你好世界</Text>
</ImageBackground>
<Text style={{color: '#fff'}}>Light Screen</Text>
<Button
title="Next screen"
onPress={() => navigation.navigate('Screen2')}
color="#fff"
/>
</SafeAreaView>
);
} function Screen2({ navigation }) {
return (
<SafeAreaView style={[styles.container]}>
<StatusBar translucent={true} backgroundColor="rgba(0, 0, 0, 0)" />
<ImageBackground style={[styles.imgBackground]} source={require('./img/my_img_bg.png')}>
<Text>另一个组件</Text>
</ImageBackground>
<Button
title="Next screen"
onPress={() => navigation.navigate('Screen1')}
/>
</SafeAreaView>
);
} const Stack = createStackNavigator(); export default function App() {
return (
<SafeAreaProvider>
<NavigationContainer>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
);
} const styles = StyleSheet.create({
container: { flex: 1 },
imgBackground:{
flex:0,
height: 280,
width:"100%",
},
});
3. 每个页面,不同的statusBar
react native 状态栏和安全区域的使用的更多相关文章
- React native 放大点击区域 hitSlop属性的使用
在日常的需求中,如上图的加减按钮,可能写ui布局的时候没考虑实际的这个点击范围太小,不利于真机上用户点击到,如果加包裹层加padding的话又会影响原先定好的布局,或者不利于对齐. 那么可以用 hi ...
- [RN] React Native 实现 类似京东 的 沉浸式状态栏和搜索栏
React Native 实现 类似京东 的 沉浸式状态栏和搜索栏 其原理其实就是在要 隐藏 部分的那个View 前面加入 StatusBar 代码! 代码如下: <StatusBar anim ...
- React Native 常见问题集合
在使用React Native时候,我记录下比较常遇到的问题,分为以下几类: 1. 调试问题 2. 写法问题 3. 疑难问题 4. 奇怪问题 调试问题 1. 在react-native run-and ...
- React Native中自定义导航条
这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的 ...
- 📝 没 2 年 React Native 开发经验,你都遇不到这些坑
如果你喜欢我的文章,希望点赞 收藏 评论 三连支持一下,谢谢你,这对我真的很重要! React Native 开发时,如果只是写些简单的页面,基本上按着官方文档 reactnative.dev就能写出 ...
- React Native:使用 JavaScript 构建原生应用
[转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...
- React Native之ListView使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 之 TextInput使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native FlexBox
FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...
随机推荐
- Blazor 拖放上传文件转换格式并推送到浏览器下载
前言 昨天有个小伙伴发了一个老外java编写的小工具给我,功能是转换西班牙邮局快递Coreeos express的单据格式成Amazon格式,他的需求是改一下程序为匹配转换另一个快递公司MRW格式到A ...
- 看完这篇你不能再说不懂SSO原理了!
这一篇是原理篇,接下来还会有一篇实战篇,实战的相关代码是非常火的一个开源项目叫:xxl-sso 一.简介 单点登录(Single Sign On),简称为 SSO. 它的解释是在多个应用系统中,用户只 ...
- jdbc访问KingbaseES数据库SocketTimeoutException Read timed out
jdbc访问KingbaseES数据库发生异常:SocketTimeoutException Read timed out 一.异常现象: 应用显示ERROR信息: Caused By: java.n ...
- DVWA靶场实战(十四)——JavaScript
DVWA靶场实战(十四) 五.Java Script: 1.漏洞原理: 这里的JavaScript其实是JavaScript Attack也就是JS攻击.JavaScript是一种基于对象和事件驱动的 ...
- TCP/IP 协议(10):TCP 协议一百问
TCP/IP 协议(10):TCP 协议一百问 杨领well 的 TCP/IP 协议专栏 TCP 协议部分一直没有更新,是因为我不确定到底应该怎么来介绍 TCP 协议才能干货满满.最后我决定以 Q&a ...
- HTML5基本网页结构以及标签的改变
转载csdn:https://blog.csdn.net/z983002710/article/details/76300327
- Vulhub 漏洞学习之:Discuz
Vulhub 漏洞学习之:Discuz 目录 Vulhub 漏洞学习之:Discuz 1 Discuz 7.x/6.x 全局变量防御绕过导致代码执行 1.1 漏洞利用过程 2 Discuz!X ≤3. ...
- .Net NPOI 简单Demo,一看就会
#region 文件输出 public class BasicInfodsa { public string name; public string phone; } List zyData = ...
- WHAT IS PPM Encoder ?
About PPM Encoder The PPM encoder allows to encode up to 8 PWM (pulse width modulated) signals into ...
- K8S 1.20 弃用 Docker 评估之 Docker CLI 的替代产品 nerdctl
背景 2020 年 12 月初,Kubernetes 在其最新的 Changelog 中宣布,自 Kubernetes 1.20 之后将弃用 Docker 作为容器运行时. 弃用 Docker 带来的 ...