React native 如何使选项卡栏图标溢出在react native中可单击？

我正在使用React Navigation 5和@React Navigation/bottom tabs的createBottomTabNavigator创建一个自定义选项卡栏

问题：红色图标只能在选项卡栏范围内单击，一旦越过选项卡栏的灰色线，我就无法单击图标

我已经为选项卡屏幕使用以下代码创建了它

<Tab.Screen
    name="Scan"
    component={Scan}
    options={({ navigation }) => {
      return {
        tabBarIcon: () => <MiddleIcon navigation={navigation} />,
      };
    }}
  />

我尝试过用可触摸的不透明度包装整个视图，但它仍然只能在选项卡栏的范围内触摸

MiddleIcon组件：

---

问题：如何使其可在底部选项卡栏的边界之外单击？

在图标上使用TouchableOpacity使其可从react-native手势处理程序中单击

在图标上使用TouchableOpacity使其可从react-native手势处理程序中单击

不适用于Men不适用于medid您发现了吗解决方案？@AliAkbarAzizi not yetI尝试自定义选项卡栏，使用React.fragment wrapper您可以完成。因为片段将元素放在父容器中。看到这里了吗？找到解决方案了吗？@AliAkbarAzizi not yetI尝试自定义选项卡栏，使用React.fragment wrapper就可以了。因为片段将元素放在父容器中。看这里

const MiddleIcon = ({ navigation }) => {
  return (
    <TouchableOpacity
      onPress={() => navigation.navigate('Scan')}
      style={styles.container}>
      <View style={styles.imageContainer}>
        <Image
          source={require('../../../assets/images/shared/scan_icon.png')}
        />
      </View>
    </TouchableOpacity>
  );
};

export default MiddleIcon;

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 20,
    height: 58,
    width: 58,
    borderRadius: 58,
    backgroundColor: colors.primaryColor,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.29,
    shadowRadius: 4.65,
    elevation: 7,

    flex: 1,
  },
  icon: {
    width: 40,
    height: 40,
    tintColor: '#fff',
    alignContent: 'center',
  },
  imageContainer: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    elevation: 5,
    width: 30,
    height: 30,
  },
});