如何扩展反应导航/底部选项卡的可触摸区域

Question

我在反应本机中有一个工作底部选项卡导航器。但有没有办法扩大它的可触摸区域呢？请参阅附图，可触摸区域为绿色，图标为红色，但预期的可触摸区域应包括绿色区域上方的白色条。

https://reactnavigation.org/docs/bottom-tab-navigator/

图1：

我尝试不传入任何内容，但默认区域与图像中的绿色区域相同。我尝试传递一个实现 TouchableOpacity 的自定义按钮组件，但它再次只占用绿色空间，而不是图像中直至黄色组件的完整空间。

增加图标高度和宽度会导致更大的可触摸区域，但这不是我正在寻找的正确解决方案。请参阅第二张图片，了解高度={40} 和宽度={40} 的图标

图2：

我当然可以使用

tabBarStyle={height: 100}

增加高度，但这只会加剧问题。可触摸区域仍然缺少顶部。

这是生成第一张图像的相关代码

import HomeFilled from '@assets/icons/home-filled.svg'
import HomeEmpty from '@assets/icons/home-empty.svg'

const TabBarLabel = ({focused, title}) => (
  <Typography variant="caption" style={focused && {fontWeight: 'bold'}}>
    {title}
  </Typography>
)

return (
    <Tab.Navigator
      initialRouteName="Home"
      lazy={false}
      screenOptions={{
        headerShown: false,
        tabBarIconStyle: {width: 24, height: 24},
        tabBarStyle: {
          backgroundColor: '#F9FAF1',
          paddingTop: 8,
        },
        tabBarActiveBackgroundColor: 'green',
      }}>
      <Tab.Screen
        name="Home"
        options={{
          tabBarIcon: ({focused}) =>
            focused ? (
              <View style={{backgroundColor: 'red'}}>
                <HomeFilled width={24} height={24} />
              </View>
            ) : (
              <View style={{backgroundColor: 'blue'}}>
                <HomeEmpty width={24} height={24} />
              </View>
            ),
          tabBarLabel: ({focused}) => (
            <TabBarLabel title="Home" focused={focused} />
          ),
        }}
        component={HomeScreen}
      />

Answer 1

这个问题的正确答案是解决图标上的填充问题

这是布局道具页面中的文档：

React Native - 填充（布局道具）