快捷導(dǎo)航

React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細(xì)講解

更新時間：2023年01月28日 14:16:53 作者：綠胡子大叔

最近在寫 React Native 項目，調(diào)試應(yīng)用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的，看起來很難受。研究了一下這個問題，現(xiàn)在總結(jié)一下解決方案，這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程

前言

最近在寫 React Native 項目，調(diào)試應(yīng)用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的，看起來很難受。研究了一下這個問題，現(xiàn)在總結(jié)一下解決方案。

相關(guān)知識點：

React Native 原生組件 <StatusBar />
React Native 提供的 Hooks - useColorScheme
重寫應(yīng)用 Main Activity 的 onCreate 生命周期方法
修改 styles.xml 配置文件

頂部狀態(tài)欄

頂部的狀態(tài)欄可以使用 React Native 提供的 <StatusBar /> 組件實現(xiàn)透明

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'} // 設(shè)置文字顏色
            />
        </View>
    )
}
export default App;

底部導(dǎo)航欄

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

在 MainActivity.java 中的 MainActivity 類中實現(xiàn)重寫 onCreate 方法

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

注意：onCreate 方法應(yīng)該被寫在 public class MainActivity extends ReactActivity 的內(nèi)部

同時，在MainActivity.java 的頭部 import 相關(guān)類

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

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

向 styles.xml 中添加內(nèi)容

    <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>

底部效果：

最后說的

關(guān)于全面屏UI和手勢適配問題，可以參考 Android 開發(fā)文檔中的相關(guān)內(nèi)容 https://developer.android.com/develop/ui/views/layout/edge-to-edge#handle-overlaps

到此這篇關(guān)于React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細(xì)講解的文章就介紹到這了,更多相關(guān)React Native全面屏狀態(tài)欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: