React Native 如何使底部选项卡导航器选项卡栏不隐藏视图中的内容

r8uurelv  于 2023-06-24  发布在  React
关注(0)|答案(1)|浏览(191)

我有一个嵌套的导航器与底部标签导航器,其中还包含一个堆栈导航器设置为初始路由。
问题是主屏幕有一个视图,其中有一个FlatList,以及其他组件。

  • 滚动时,最后一项(或位于此视图最底部的内容)始终隐藏在导航器的选项卡栏后面,如以下屏幕截图所示 *

有没有什么方法可以调整它,而不隐藏标签栏?我正在考虑创建一个常量TABBAR_HEIGHT,并将其分配给主视图的样式,如style={{marginBottom:TABBAR_HEIGHT}},但我认为这是一种解决这个问题的肮脏方法,对吗?
PS:我试过使用以下替代品(没有运气)

  1. useSafeAreaInsets()钩子
    1.使用import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';,然后使用SafeAreaProvider Package TabNavigator并使用SafeAreaView作为MainScreen中的主视图
    谢谢你给予我的任何建议
von4xj4u

von4xj4u1#

如果您使用的是react-navigation,并且已经构建了一个自定义的底部选项卡,请确保底部选项卡不是绝对定位的(position: "absolute")。完全定位底部选项卡将释放容器中它后面的空间,并让组件在该空间中渲染。

相关问题