javascript 如何隐藏底部导航栏?

j2cgzkjk  于 2023-05-12  发布在  Java
关注(0)|答案(3)|浏览(168)

我想隐藏底部导航栏或使其透明,以便“视图”全屏显示。
有什么办法可以做到这一点吗?

我希望它在不使用时会自动隐藏。它应该只在用户想要使用像在Youtube中的导航时可见,当我们在横向视图中观看视频。

dluptydi

dluptydi1#

你可以参考这个线程:https://stackoverflow.com/a/55077439/20325571您需要安装一个新的软件包:npm install react-native-navigation-bar-color
然后,您需要导入

import {
  HideNavigationBar,
  ShowNavigationBar,
} from 'react-native-navigation-bar-color';

这些方法将可用:ShowNavigationBar();HideNavigationBar();

vwoqyblh

vwoqyblh2#

我就是这样解决这个问题的。
导入库react-native-navigation-bar-color
然后你可以像这样使用它。

import {View, Button} from 'react-native';
import {hideNavigationBar} from 'react-native-navigation-bar-color';

const BottomBar = () => {
  hide = () => {
    hideNavigationBar();
  };

  return (
    <View>
      <Button title="Hide bar" onPress={() => hide()} />
    </View>
  );
};

export default BottomBar;
8yoxcaq7

8yoxcaq73#

您可以使用expo的NavigationBar组件来控制其外观。setVisibilityAsyncsetBehaviourAsync将是您需要的两个函数。从文档:
例如,如果导航栏被隐藏(setVisibilityAsync(false))并且行为是“覆盖滑动”,则用户可以从屏幕的底部滑动以临时显示导航栏。
https://docs.expo.dev/versions/latest/sdk/navigation-bar/

相关问题