React Native Android 导航栏半透明答案

【问题标题】：React Native Android Navigation Bar TranslucentReact Native Android 导航栏半透明
【发布时间】：2019-08-28 19:23:52
【问题描述】：

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

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

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

【问题讨论】：

什么是崩溃？也许这就是这样做的方法，但您需要深入挖掘一下？
@doubleA 在我设置changeNavigationBarColor('transparent');后重新加载后，应用程序崩溃，没有警告或异常。
你试过这个 changeNavigationBarColor('#ffffffff',true) 吗？它有 8f 而最后两个表示 Alpha 通道。
@Ashwin Mothilal 我以前尝试过这个技巧，不幸的是也没有运气......
@Rondev 仔细检查 logcat。您所描述的是来自 Android 操作系统的致命错误。 RN 中没有错误消息，屏幕上没有弹出任何内容是致命的崩溃。那应该在 AS 的 Logcat 中。

标签： javascript android react-native

【解决方案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 获取安全区域插图。

安全内容视图示例：

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

【讨论】：

【解决方案2】：

所以我查看了模块以及它在做什么，发现它只是使用原生 android Color 库来解析字符串。（可以在这里找到它的文档：https://developer.android.com/reference/android/graphics/Color）

我能够使用文档中指定的#AARRGGBB 模式获得导航栏透明度。不支持 3 或 4 个字母的十六进制字符串，也不支持 rgb 字符串。一些颜色名称被列为支持，但transparent 不是其中之一。

不幸的是，尽管我能够将导航栏设置为完全透明，但我无法让应用在其后面实际绘制任何内容，因此完全透明实际上最终只是白色，以及介于两者之间的任何内容是相对于该白色背景的透明度。

【讨论】：

【解决方案3】：

您似乎不接受字符串值。你想试试这个吗？

changeNavigationBarColor('rgba(0,0,0,0)',true)

【讨论】：

看起来这个函数只接受十六进制作为字符串，因为这一行也会使应用程序崩溃而没有任何警告或异常

【解决方案4】：

我们需要制作自定义导航栏并为其添加安全区域。然后为安全区域提供所需的颜色。下面是例子，

<ImageBackground style={{flex:1, backgroundColor: 'silver'}} source={require('./des.jpeg')}>
<SafeAreaView style={{backgroundColor: 'transparent'}}/>

</ImageBackground>

【讨论】：

我已经在使用这个技巧作为临时替代方案。但这仍然不会使导航栏半透明
我添加了背景图片并尝试使安全区域透明，它对我有用，已更新之前答案中的代码请检查它是否适合您
你能提供你的完整代码吗？它似乎对我不起作用
如果可能的话，把你的代码发给我，这样我会更好地了解你想要做什么。