时间戳

首页 > 解决方案 > React Native Android 导航栏半透明

javascript - React Native Android 导航栏半透明

问题描述

我正在尝试在 android 上将导航栏设置为半透明。以图像为例：

我尝试使用react-native-navigation-bar-color，但它只允许我隐藏导航栏/显示导航栏/更改导航栏的颜色。所以使用这个导航栏库，我试图设置changeNavigationBarColor('transparent');，但它使我的应用程序崩溃。

我也尝试过从这里带来的设置android:fitsSystemWindows="true"，但不幸的是没有任何改变。AndroidManifest.xml

标签： javascriptandroidreact-native

解决方案

获得半透明导航和状态栏的一个好方法是在android > app > src > main > res > values > styles.xml中添加 3 个样式项

这些会将底部导航栏设置为半透明：
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>

这将顶部状态栏设置为半透明：
<item name="android:windowTranslucentStatus">true</item>

styles.xml 中的实现示例：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>

        <!-- Make status & navigation bar translucent -->
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

这将使您的内容呈现在状态和导航栏下方。
要解决此问题，您可以使用react-native-safe-area-context获取安全区域插图。

安全内容视图的示例：

import { SafeAreaInsetsContext } from "react-native-safe-area-context";
const ContentView = (props) => {
    const safeInsets = useContext(SafeAreaInsetsContext);
    return (
        <View
            style={[
                {
                    marginLeft: safeInsets?.left,
                    marginTop: safeInsets?.top,
                    marginRight: safeInsets?.right,
                    marginBottom: safeInsets?.bottom
                }
            ]}
        >
            {props.children}
        </View>
    );
}

推荐阅读