Question

我正在使用ART库绘制图形，因此我想使图形可触摸以实现更好的交互。我尝试了以下操作：

bindCallBackClick = (elem) => {
        Alert.alert("function called",JSON.stringify(elem));
}

render() {
  const window = Dimensions.get('window');
  const {
      Surface,
      Group,
      Shape,
      Text
  } = ART;

  return(
    <View>
                <Surface width={window.width} height={window.height}>
          <Group x={(window.width-170)/2} y={((window.height-60-170)/2)+65}>
            {arcTicks.map((name,index)=>{
              //Alert.alert("cnwk",JSON.stringify(name));
              return(
                <TouchableWithoutFeedback key={index} onPress={()=>this.bindCallBackClick.bind(index)}>
                  <Group key={index}>
                    <Shape
                         key={index}
                         d={name.tick}
                         fill="black"
                     />
                  </Group>
                 </TouchableWithoutFeedback>
              );
            })
            }
          </Group>
        </Surface>
    </View>
  );
}

，但不起作用。当我单击任何shape。时，我都不会收到警报。请帮助我找出我的错误之处。谢谢。

Answer 1

将您的ART元素与Touchable组件内的View Component包裹在一起，您应该删除bind，因为bindCallBackClick是箭头功能。

尝试一下：

bindCallBackClick = () => {
 Alert.alert('function called');
};

render() {
  return(
    <View>
     <Surface width={window.width} height={window.height}>
      <Group x={(window.width-170)/2} y={((window.height-60-170)/2)+65}>
        {arcTicks.map((name,index)=>{
          //Alert.alert("cnwk",JSON.stringify(name));
          return(
              <TouchableWithoutFeedback key={index} onPress={this.bindCallBackClick}>
                       <View>
                          <Group key={index}>
                            <Shape
                                 key={index}
                                 d={name.tick}
                                 fill="black"
                             />
                          </Group>
                       </View>
             </TouchableWithoutFeedback>
          );
         })
        }
      </Group>
    </Surface>
</View>
 );
}

或使用此方法更改bindCallBackClick方法，而不是使用箭头功能：

constructor(props) {
 super(props);

 this.bindCallBackClick = this.bindCallBackClick.bind(this);
}

bindCallBackClick(elem) {
 Alert.alert('function called');
}

render() {
      return(
        <View>
         <Surface width={window.width} height={window.height}>
          <Group x={(window.width-170)/2} y={((window.height-60-170)/2)+65}>
            {arcTicks.map((name,index)=>{
              //Alert.alert("cnwk",JSON.stringify(name));
              return(
                  <TouchableWithoutFeedback key={index} onPress={this.bindCallBackClick}>
                           <View>
                              <Group key={index}>
                                <Shape
                                     key={index}
                                     d={name.tick}
                                     fill="black"
                                 />
                              </Group>
                           </View>
                 </TouchableWithoutFeedback>
              );
             })
            }
          </Group>
        </Surface>
    </View>
     );
}

我已经在这个博览会https://snack.expo.io/H1f2NJlz7

中创建了示例

TouchableOpacity在艺术形状中不起作用

1 个答案: