reactjs - BottomTabBar 转换图标不可垂直点击

Question

我在 react-native 中使用 @react-navigation/bottom-tabs。而且我需要该区域上方的加号按钮，所以我能够实现它，但是在Android中，加号图标的一半区域在android中是不可点击的。但在 IOS 中，它运行良好，任何人都有答案。

BottomTabBar 组件

    import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
    import * as React from 'react';
    
    import TabBarIcon from '../components/TabBar/TabBarIcon';
    import CustomTabBar from '../components/TabBar/CustomTabBar';
    import {
      ShotsNavigator,
    } from './StackNavigator';
    
    const BottomTab = createBottomTabNavigator();
    const INITIAL_ROUTE_NAME = 'Main';
    
    export default function BottomTabNavigator({navigation, route}) {
      // Set the header title on the parent stack navigator depending on the
      // currently active tab. Learn more in the documentation:
      // https://reactnavigation.org/docs/en/screen-options-resolution.html
      navigation.setOptions({headerTitle: getHeaderTitle(route)});
    
      return (
        <BottomTab.Navigator
          initialRouteName={INITIAL_ROUTE_NAME}
          tabBar={(props) => <CustomTabBar {...props} />}
          headerMode="none"
          tabBarOptions={{
            backgroundFeaturedIcon: '#34119f',
            activeFeaturedTintColor: '#F2F3EF',
            inactiveFeatureTintColor: '#3b4c33',
            activeTintColor: 'red',
            inactiveTintColor: 'gray',
            keyboardHidesTabBar: false,
    
            style: {
              backgroundColor: 'white',
              height: 65,
              zIndex: 9999,
              position: 'relative',
            },
          }}>
          
          <BottomTab.Screen
            name="Shots"
            component={ShotsNavigator}
            options={{
              title: 'Shots',
              tabBarIcon: (focused) =>
                focused ? (
                  <TabBarIcon focused={focused} name="shot" />
                ) : (
                  <TabBarIcon focused={focused} name="shot" />
                ),
            }}
          />
    
          
      );
    }
    
    function getHeaderTitle(route) {
      const routeName =
        route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;
    
      switch (routeName) {
        case 'Shots':
          return {headerShown: false};
      }
    }
    

自定义标签栏组件

    import React from 'react';
    import {
      SafeAreaView,
      View,
      TouchableWithoutFeedback,
      TouchableOpacity,
      StyleSheet,
      Text,
      Platform,
    } from 'react-native';
    
    const CustomTabBar = (props) => {
      const {
        state: {index, routes},
        navigation,
        descriptors,
        style,
        activeTintColor,
        activeFeaturedTintColor,
        inactiveTintColor,
      } = props;
    
      return (
        <SafeAreaView
          elevation={5}
          style={{
            flexDirection: 'row',
            height: 60,
            width: '100%',
            ...style,
          }}>
          {routes.map((route, idx) => {
            const {options} = descriptors[route.key];
    
            const label =
              options.tabBarLabel !== undefined
                ? options.tabBarLabel
                : options.title !== undefined
                ? options.title
                : route.name;
    
            const isFocused = index === idx;
    
            const icon =
              options.tabBarIcon !== undefined
                ? options.tabBarIcon(isFocused, 'white', 10)
                : null;
    
            const onPress = () => {
              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
                canPreventDefault: true,
              });
    
              if (!isFocused && !event.defaultPrevented) {
                navigation.navigate(route.name);
              }
            };
    
            const onLongPress = () => {
              navigation.emit({
                type: 'tabLongPress',
                target: route.key,
              });
            };
    
            return (
              <TouchableOpacity
                accessibilityRole="button"
                accessibilityStates={isFocused ? ['selected'] : []}
                accessibilityLabel={options.tabBarAccessibilityLabel}
                testID={options.tabBarTestID}
                key={route.key}
                activeOpacity={0.7}
                onPress={onPress}
                onLongPress={onLongPress}
                style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <View
                  style={
                    route.name === 'Shots'
                      ? [
                          styles.customIcon,
                          {
                            borderRadius: 50,
                            transform: [{translateY: -15}],
                            //backgroundColor: 'yellow',
                            zIndex: 9999,
                            // position: 'relative',
                            // top: -20,
                          },
                        ]
                      : styles.customIcon
                  }>
                  {icon}
                </View>
              
              </TouchableOpacity>
            );
          })}
        </SafeAreaView>
      );
    };
    const styles = StyleSheet.create({
      customIcon: {
        height: 30,
        width: 30,
        justifyContent: 'center',
        alignItems: 'center',
      },
      iconLabel: {
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 10,
      },
    });
    
    export default CustomTabBar;
    

TabBarIcon 组件

    import * as React from 'react';
    import * as Images from './../../assests/bottomTab/index';
    import {View} from 'react-native';
    
    export default function TabBarIcon(props) {
      const TabBarIconsComponent = Images[props.name];
    
      if (props.name === 'shot') {
        return <TabBarIconsComponent height={90} width={90} />;
      }
    }

请检查以下链接，这正是我要解决的问题。 我正在使用带有加号按钮的底部选项卡，但是加号按钮在仅在 android 中反应原生的一半区域中不可点击？

标签： reactjsreact-nativereact-navigationreact-navigation-bottom-tabreact-native-cli