reactjs React原生Modal绕过expo导航栏设置

xyhw6mcr  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(139)

在我的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
    >

...导航栏变成白色,甚至当我试图设置它也在我的模态组件,以及,任何已知的解决方案?

z9ju0rcb

z9ju0rcb1#

我在Android中也遇到过这个问题。我认为发生的是react-native模式只是简单地使用styles.xml中的默认android:navigationBarColor,所以每次弹出它时,它都会覆盖当前导航栏的颜色,直到它被取消。
标志状态BarTransparent对我不起作用。
我可以通过导航到res/values/styles.xml修复此问题
然后在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原生代码中,我使用了react-native-navigation-bar-color。我相信这应该适用于expo-navigation-bar,因为主要问题源于react原生模态试图覆盖默认的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.
  };

希望这能帮到什么人!

相关问题