无法单击 React Native 中底部导航中的图标

Question

我只是想问一下，为什么我的底部导航图标在完全单击图标时无法导航，但它会在按钮边框宽度之外导航。

这是我底部导航的图片，你可以看到它有一个borderWidth 围绕它。

截图：

这是我的导航代码：

<NavigationContainer>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconName;

              if (route.name === 'Home') {
                iconName = focused ? 'home' : 'home';
                color = focused ? 'primary' : 'basic';
              } else if (route.name === 'Details') {
                iconName = focused ? 'search' : 'search';
                color = focused ? 'primary' : 'basic';
              }

              // You can return any component that you like here!
              return (
                <TouchableOpacity style={{borderWidth: 2}}>
                  <Button
                    status={color}
                    appearance="ghost"
                    accessoryLeft={<Icon name={iconName} />}
                  />
                </TouchableOpacity>
              );
            },
            tabBarActiveTintColor: 'tomato',
            tabBarInactiveTintColor: 'gray',
            tabBarShowLabel: false,
            headerShown: false,
          })}>
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Details" component={Details} />
        </Tab.Navigator>
      </NavigationContainer>

Answer 1

TouchableOpacity 有一个名为 onPress 的属性，您可以将其用于导航和点击/触摸。