ReactNative全面屏状态栏和底部导航栏适配教程详细讲解
前言
最近在写 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/class="lazy" data-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/class="lazy" data-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全面屏状态栏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
