React Native Modal 绕过 expo 导航栏设置

Question

在我的 App.js 中我设置了：

import * as NavigationBar from "expo-navigation-bar";

...In my component

 useEffect(() => {
    if (android) {
      NavigationBar.setBackgroundColorAsync("transparent");
    }
  }, []);

这将我的导航栏在所有屏幕中设置为透明，但是当模式可见时：

    <Modal
      animationType="none"
      transparent
      visible={isVisible}
      presentationStyle="overFullScreen"
      hardwareAccelerated
    >

...导航栏变成白色，即使我尝试将其也设置在我的模态组件中，对此有任何已知的解决方案吗？

Answer 1

我在安卓上也遇到这个问题。我相信正在发生的事情是，react-native 模式只是采用android:navigationBarColorstyles.xml 中的默认值，因此每次弹出时，它都会覆盖当前的导航栏颜色，直到它被关闭。

标志 statusBarTranslucent 对我不起作用。

我可以通过导航到/res/values/styles.xml您的app或src文件夹来解决此问题，如果您将视图样式更改为“Android”，这确实很有帮助

然后

然后在AppTheme样式中我添加了navigationBarColor以使其透明。看起来像这样

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:navigationBarColor">@android:color/transparent</item> // <----This is what I added
  </style>

然后在我的 React Native 代码中，我使用了react-native-navigation-bar-color. 我相信这应该有效expo-navigation-bar，因为主要问题源于反应本机模式试图覆盖默认的 navBarColor 值。

import changeNavigationBarColor from "react-native-navigation-bar-color";

  const setDarkMode = (isDarkMode: boolean) => {
    // logic to change my app's themeProvider to dark mode
    changeNavigationBarColor(isDarkMode ? "black" : "white"); // Then I change the navigation bar color.
  };

希望这对某人有帮助！