Touchableopacity onpress 在 SVG 标签内不起作用答案

【问题标题】：Touchable opacity on press not working inside SVG tagsTouchableopacity onpress 在 SVG 标签内不起作用
【发布时间】：2019-11-22 22:54:16
【问题描述】：

我在 <Svg> 中有一个组件，在该组件中有一个按钮（<TouchableOpacity> 和 <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

【问题讨论】：

标签： javascript reactjs react-native svg

【解决方案1】：

原因是 SVG 作为父元素位于顶部，从而禁用了对 TouchableOpacity 的可访问性。这意味着对于TouchableOpacity，按下命令是不可访问的。总之使用单父元素。

【讨论】：

什么是“单父元素”？

【解决方案2】：

你需要用 TouchableOpacity 标签包裹你的 svg，像这样：

<TouchableOpacity
    onPress={() => {
        console.log('DSDA')
    }}
>
    <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 ><Text>Click me!!</Text>
        </View>
    </Svg>
</TouchableOpacity>

【讨论】：

【解决方案3】：

在任何情况下，可触摸不透明度不会注册按下事件，这可能取决于您从何处导入可触摸不透明度。尝试从“react-native”本身导入它，而不是一些社区模块

【讨论】：

【解决方案4】：

将您的 svg 包装在 Touchable 中应该能够识别 svg 的触摸。尝试将其包装在可触摸组件中。

【讨论】：

这是对主要问题的实际答案吗？你要把它发给谁？
我认为您的意思是“如果您进行任何包装，包装器必须是可触摸的，以便包装的结果可以被触摸识别。这是您问题的解决方案，如果它是由包裹在别的东西里。” （这种措辞是“解释性条件答案”。这是一种针对由于缺乏评论权限而无法在 cmets 中提出澄清问题的用户的一种方法。
这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review