React Native全面屏状态栏和底部导航栏适配教程详细讲解

 更新时间:2023年01月28日 14:16:53   作者:绿胡子大叔  
最近在写 React Native 项目,调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的,看起来很难受。研究了一下这个问题,现在总结一下解决方案,这篇文章主要介绍了React Native全面屏状态栏和底部导航栏适配教程

前言

最近在写 React Native 项目,调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的,看起来很难受。研究了一下这个问题,现在总结一下解决方案。

相关知识点:

  • React Native 原生组件 <StatusBar />
  • React Native 提供的 Hooks - useColorScheme
  • 重写应用 Main Activity 的 onCreate 生命周期方法
  • 修改 styles.xml 配置文件

顶部状态栏

顶部的状态栏可以使用 React Native 提供的 <StatusBar /> 组件实现透明

import { View, StatusBar, useColorScheme } from "react-native";
import type { FC } from "react";
const App: FC = () => {
    const colorScheme = useColorScheme();
    return (
        <View>
            <StatusBar
                translucent={true}
                backgroundColor="rgba(0,0,0,0)"
                barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'} // 设置文字颜色
            />
        </View>
    )
}
export default App;

底部导航栏

打开 /android/app/src/main/java/包名/MainActivity.java

MainActivity.java 中的 MainActivity 类中实现重写 onCreate 方法

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

注意:onCreate 方法应该被写在 public class MainActivity extends ReactActivity 的内部

同时,在MainActivity.java 的头部 import 相关类

import android.os.Bundle;
import androidx.core.view.WindowCompat;

打开 /android/app/src/main/res/values/styles.xml

styles.xml 中添加内容

    <item name="android:navigationBarColor">@android:color/transparent</item>
<resources>
<!—Base application theme. >
<style name="AppTheme" parent="Theme .AppCompat. DayNight.NoActionBar">
<l—Customize your theme here.>
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
<item name="android: navigationBarColor">@android:color/transparent</item>
<style>
<resources>

底部效果:

最后说的

关于全面屏UI和手势适配问题,可以参考 Android 开发文档中的相关内容 https://developer.android.com/develop/ui/views/layout/edge-to-edge#handle-overlaps

到此这篇关于React Native全面屏状态栏和底部导航栏适配教程详细讲解的文章就介绍到这了,更多相关React Native全面屏状态栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React Native 真机断点调试+跨域资源加载出错问题的解决方法

    React Native 真机断点调试+跨域资源加载出错问题的解决方法

    下面小编就为大家分享一篇React Native 真机断点调试+跨域资源加载出错问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • React+EggJs实现断点续传的示例代码

    React+EggJs实现断点续传的示例代码

    这篇文章主要介绍了React+EggJs实现断点续传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • React Hooks使用常见的坑

    React Hooks使用常见的坑

    React Hooks 是 React 16.8 引入的新特性,允许我们在不使用 Class 的前提下使用 state 和其他特性。接下来通过本文给大家分享React Hooks使用避坑指南,一起学习下吧
    2021-06-06
  • React中的useState和useEffect详细解析

    React中的useState和useEffect详细解析

    useState和useEffect是React的两个重要Hook,用于组件状态管理和处理副作用,useState允许添加状态变量,控制组件渲染,而useEffect用于执行渲染后的副作用操作,本文给大家介绍React中的useState和useEffect详细解析,感兴趣的朋友跟随小编一起看看吧
    2024-10-10
  • React错误边界Error Boundaries详解

    React错误边界Error Boundaries详解

    错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树
    2022-12-12
  • React Navigation 使用中遇到的问题小结

    React Navigation 使用中遇到的问题小结

    本篇文章主要介绍了React Navigation 使用中遇到的问题小结,主要是安卓和iOS中相对不协调的地方,特此记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • create-react-app项目配置全解析

    create-react-app项目配置全解析

    这篇文章主要为大家介绍了create-react-app项目配置全解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • React快速入门教程

    React快速入门教程

    本文主要介绍了React的相关知识,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 详解Immutable及 React 中实践

    详解Immutable及 React 中实践

    Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。这篇文章主要介绍了Immutable及 React 中的实践,需要的朋友可以参考下
    2018-03-03
  • React图片压缩上传统一处理方式

    React图片压缩上传统一处理方式

    这篇文章主要介绍了React图片压缩上传统一处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11

最新评论