SVG标签内部无法正常印刷的可触摸不透明度

Question

我在SVG内有一个组件，在组件内有一个按钮（带View的可触摸不透明性），而按钮onClick可以很好地独立运行，当我将组件包装在SVG内时它不起作用

<Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' {...props}>
      <Defs>
        <LinearGradient
          id='prefix__b'
          x1={'75.7%'}
          y1={'34.3%'}
          x2={'84.6%'}
          y2={'-9.6%'}
          gradientUnits='objectBoundingBox'
        >
          <Stop offset={1} stopColor='#2ff290' />
        </LinearGradient>
      </Defs>
      <View >
          <TouchableOpacity
              onPress={() => {
                console.log('DSDA')
              }}
            ><Text>Click me!!</Text>
          </TouchableOpacity>
          </View>
    </Svg>

任何解决方法或问题原因

https://github.com/react-native-community/react-native-svg/issues/1050

Answer 1

这样做的原因是 SVG 作为父元素位于顶部，禁用了 TouchableOpacity 的可访问性。这意味着 TouchableOpacity 无法访问按下命令。简而言之，使用单父元素。