javascript - React Native Android 导航栏半透明

Question

我正在尝试将 Android 上的导航栏设置为半透明。例如看一下图像:


_{(来源:morenews.pk)}

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

我还尝试在从 here 带来的 AndroidManifest.xml 中设置 android:fitsSystemWindows="true" ，但不幸的是没有任何改变。

Answer 1

获得半透明导航和状态栏的一个好方法是向 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获取安全区域插图。

安全内容 View 示例:

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>
    );
}