尝试让Expo中的Android导航栏透明

Question

我正在使用 expo 开发一个 React Native 项目，并尝试将 Android 导航栏放在我的视图之上（如下所示并在此处进行了描述）

但是我很难获得想要的结果，而是在底部看到一个灰色的条。

到目前为止，我尝试在我的 app.json 文件中将导航栏设置为透明或使用 NavigationBar.setBackgroundColorAsync(color) 两者都以相同的结果结束。

//app.json
    "androidNavigationBar": {
      "backgroundColor":"#00000000"
    },

//App.js
    //also tried flex: 1
    <View style={{height: Dimensions.get("screen").height, backgroundColor: "blue"}}></View>

Answer 1

尝试使用expo-navigation-bar

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

NavigationBar.setPositionAsync("absolute");
NavigationBar.setBackgroundColorAsync("#ffffff01");

Answer 2

使用expo-navigation-bar：

npx expo install expo-navigation-bar

你可以在App.js中这样设置：

await NavigationBar.setVisibilityAsync("hidden")

我还建议设置：

await NavigationBar.setBehaviorAsync('overlay-swipe')

用户可以在需要时访问导航栏。您可以在这里查看其他设置：

https://docs.expo.dev/versions/latest/sdk/navigation-bar/