React Native 安卓全面屏状态栏和底部导航栏透明适配
前言顶部状态栏底部导航栏最后说的
前言
最近在写 React Native 项目,调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的,看起来很难受。研究了一下这个问题,现在总结一下解决方案。
相关知识点:
React Native 原生组件
顶部状态栏
顶部的状态栏可以使用 React Native 提供的
import { View, StatusBar, useColorScheme } from "react-native";
import type { FC } from "react";
const App: FC = () => {
const colorScheme = useColorScheme();
return (
translucent={true} backgroundColor="rgba(0,0,0,0)" barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'} // 设置文字颜色 /> ) } 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 中添加内容 底部效果: 最后说的 关于全面屏UI和手势适配问题,可以参考 Android 开发文档中的相关内容 https://developer.android.com/develop/ui/views/layout/edge-to-edge#handle-overlaps 精彩内容
发表评论