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

Posted 2023-02-16

【中文标题】无法单击 React Native 中底部导航中的图标

【英文标题】：Can't click the icon in Bottom Navigation in React Native

【发布时间】：2021-12-17 12:39:36

【问题描述】：

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

这是我底部导航的图片，你可以看到它有一个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>

【参考方案1】：

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