Javascript 如何根据使用React native给定的坐标显示圆

我想要实现什么？

因此，我有一个足球场图像，用户将使用该图像单击事件发生的位置。一旦用户单击该区域，我就将x和y坐标存储在一个变量中，然后将其推送到一个数组中。然后，我希望在他们单击的位置显示一个圆/点

我已经粘贴了到目前为止的代码，但是非常感谢所有的选择/建议

下面是前端，它创建了用户可以单击的我的区域。按下该区域后，将执行一个功能，如下所示

  <TouchableOpacity onPress={(e) => this.getPosition(e)}>
        <View style= {styles.AreaContainer}>
        </View>
  </TouchableOpacity>

   getPosition = async(e) => {
    
            this.setState({xPosition: e.nativeEvent.locationX , yPosition: e.nativeEvent.locationY}, () => {
                // put the things you wish to occur after you have set your state.
                console.log(this.state.xPosition);
                console.log(this.state.yPosition);

     
            }); 

}