react-native bottomTabNavigator 被Android系统导航栏部分覆盖

Posted 2023-05-07

【中文标题】react-native bottomTabNavigator 被Android系统导航栏部分覆盖

【英文标题】：react-native bottomTabNavigator is partially covered by Android system navigation bar

【发布时间】：2021-05-26 01:06:01

【问题描述】：

我正在为即将到来的顶点项目学习 react-native。我正在设计一个粗略的导航设置，希望可以在我的项目中使用。我当前的问题是 bottonTabNavigator 被 android 系统的导航栏部分覆盖。我尝试将整个应用程序包装在 SafeAreaProvider 和 SafeAreaView 中，但这似乎并没有解决问题。有什么建议吗？

如果您想查看我的代码，您可以在以下 repo 中查看。 Link to all of the project code in a repo.

版本控制/环境信息： 节点：v15.8.0 NPM：7.5.3 纱线：1.22.5（我通常用这个） 世博会：4.1.6

Example of how the issue looks on my phone.

【参考方案1】：

您确定底部标签栏被部分覆盖了吗？默认情况下，每个选项卡顶部都有一个图标，按钮上有一个文本。您的图像在底部显示选项卡的标题，在标题上方显示要呈现的图标的空间（查看react-native-vector-icons 以获得一些光滑且易于使用的图标）。您是否暗示您想隐藏在底部标签栏下方呈现的 Android 导航栏？如果是这样，我认为这可能是相关的：Hide Android Navigation Bar in React Native。

【讨论】：

谢谢你的问题，swoodruff。我确实相信系统的导航栏部分覆盖了底部标签导航。我在帖子中添加的图像说明了我的意思。我的理解是这个底部标签导航栏应该放在系统导航栏的正上方。目前，看起来两个栏都放置在同一个位置，并且由于底部选项卡导航器菜单有点高，您仍然可以看到一些文本。我可以考虑隐藏导航栏，但老实说，如果需要的话，我不想在以后使用它作为解决方案。

我也会查看图标，也许文字对我来说看起来太低了，我认为它在中间。抱歉，如果我误解了您最初的评论。

Here 是一个直接指向 react-native-vector-icons 文档的链接，他们在其中创建了一个底部标签栏。

你是对的！一旦我添加了图标，它看起来好多了。我可能仍然需要使用填充和诸如此类的东西，但你解决了它！谢谢！