React Native全面屏状态栏和底部导航栏适配教程详细讲解
作者:绿胡子大叔
最近在写 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全面屏状态栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!