React native React Native：单击多个位置（如X和Y坐标）时，如何获得多个标记图像

我正在React native中开发一个示例应用程序。实际上，当我单击图像上的特定位置时，会得到相应的x和y坐标。但在该位置，我希望在多个时间和多个位置显示标记

这是我显示的代码：

return (


      <View style={styles.container}>
      <TouchableOpacity onPress={(evt) => this.handlePress(evt)}>
      <Image source={require('./back1.jpg')} style={{resizeMode:'cover'}}>
         </Image>
         </TouchableOpacity>
      </View>
    );

handlePress(evt){
  Alert.alert(`x coord = ${evt.nativeEvent.locationX}`);
  Alert.alert(`y coord = ${evt.nativeEvent.locationY}`);
}

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Alert,
  AlertIos,
  Image,
  Coordinates,
  TouchableOpacity,
  View
} from 'react-native';

import Badge from 'react-native-smart-badge'

var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
export default class index extends Component {
  constructor(props) {
    super(props)
    this.state={
      xcor:null,
      ycor:null,
      corx:'',
      array:[],
      count: 0

    }

  }




handlePress(evt){
  var array =this.state.array
  var count = 0
  console.log("Coordinates",`x coord = ${evt.nativeEvent.locationX}`);
  console.log("Coordinates",`y coord = ${evt.nativeEvent.locationY}`);
  var cordinates = {"xcor":evt.nativeEvent.locationX,
    "ycor":evt.nativeEvent.locationY,
    "name" :"Keven"}
  array.push(cordinates)
  this.setState({
    array:array
  })

 /* this.setState({
    xcor:evt.nativeEvent.locationX,
    ycor:evt.nativeEvent.locationY,
    corx:evt.nativeEvent.locationX
  })*/
}

  render() {
    var array =[];
    if(this.state.array.length != 0){
      this.state.array.map((res)=>{
        array.push(
          <View style={{position:"relative",flex:1,left:res.xcor,top:res.ycor,right:res.xcor,bottom:res.ycor}}>
           <Badge textStyle={{color: 'white',}} minWidth={18} minHeight={18} style={{marginTop: 8,marginLeft:-16}}>
                    {res.name}
                </Badge>
            <Image source={require('./logo.png')} style={{resizeMode:'cover',width:35,height:35}}>
            </Image>
          </View>
          )
      })
    }
    return (
      <View style={styles.container} >
      <View style={{position:'absolute'}} >
      <TouchableOpacity onPress={(evt) => this.handlePress(evt)}>
      <Image  source={require('./back2.jpg')} style={{resizeMode:'cover',width:windowSize.width,height:windowSize.height}}>
        </Image>
         </TouchableOpacity>

        </View>

        {this.state.array.length != 0 ?(
          <View >
                {array}
              </View>
          ):(<View></View>)
         }

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

  }
});

module.exports=index;

这是我的截图，只显示坐标：

return (


      <View style={styles.container}>
      <TouchableOpacity onPress={(evt) => this.handlePress(evt)}>
      <Image source={require('./back1.jpg')} style={{resizeMode:'cover'}}>
         </Image>
         </TouchableOpacity>
      </View>
    );

handlePress(evt){
  Alert.alert(`x coord = ${evt.nativeEvent.locationX}`);
  Alert.alert(`y coord = ${evt.nativeEvent.locationY}`);
}

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Alert,
  AlertIos,
  Image,
  Coordinates,
  TouchableOpacity,
  View
} from 'react-native';

import Badge from 'react-native-smart-badge'

var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
export default class index extends Component {
  constructor(props) {
    super(props)
    this.state={
      xcor:null,
      ycor:null,
      corx:'',
      array:[],
      count: 0

    }

  }




handlePress(evt){
  var array =this.state.array
  var count = 0
  console.log("Coordinates",`x coord = ${evt.nativeEvent.locationX}`);
  console.log("Coordinates",`y coord = ${evt.nativeEvent.locationY}`);
  var cordinates = {"xcor":evt.nativeEvent.locationX,
    "ycor":evt.nativeEvent.locationY,
    "name" :"Keven"}
  array.push(cordinates)
  this.setState({
    array:array
  })

 /* this.setState({
    xcor:evt.nativeEvent.locationX,
    ycor:evt.nativeEvent.locationY,
    corx:evt.nativeEvent.locationX
  })*/
}

  render() {
    var array =[];
    if(this.state.array.length != 0){
      this.state.array.map((res)=>{
        array.push(
          <View style={{position:"relative",flex:1,left:res.xcor,top:res.ycor,right:res.xcor,bottom:res.ycor}}>
           <Badge textStyle={{color: 'white',}} minWidth={18} minHeight={18} style={{marginTop: 8,marginLeft:-16}}>
                    {res.name}
                </Badge>
            <Image source={require('./logo.png')} style={{resizeMode:'cover',width:35,height:35}}>
            </Image>
          </View>
          )
      })
    }
    return (
      <View style={styles.container} >
      <View style={{position:'absolute'}} >
      <TouchableOpacity onPress={(evt) => this.handlePress(evt)}>
      <Image  source={require('./back2.jpg')} style={{resizeMode:'cover',width:windowSize.width,height:windowSize.height}}>
        </Image>
         </TouchableOpacity>

        </View>

        {this.state.array.length != 0 ?(
          <View >
                {array}
              </View>
          ):(<View></View>)
         }

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

  }
});

module.exports=index;

我希望此类型同时显示位置图像或图标

---

谁能帮我解决这个问题。

最后我解决了我的问题：

return (


      <View style={styles.container}>
      <TouchableOpacity onPress={(evt) => this.handlePress(evt)}>
      <Image source={require('./back1.jpg')} style={{resizeMode:'cover'}}>
         </Image>
         </TouchableOpacity>
      </View>
    );

handlePress(evt){
  Alert.alert(`x coord = ${evt.nativeEvent.locationX}`);
  Alert.alert(`y coord = ${evt.nativeEvent.locationY}`);
}

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Alert,
  AlertIos,
  Image,
  Coordinates,
  TouchableOpacity,
  View
} from 'react-native';

import Badge from 'react-native-smart-badge'

var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
export default class index extends Component {
  constructor(props) {
    super(props)
    this.state={
      xcor:null,
      ycor:null,
      corx:'',
      array:[],
      count: 0

    }

  }




handlePress(evt){
  var array =this.state.array
  var count = 0
  console.log("Coordinates",`x coord = ${evt.nativeEvent.locationX}`);
  console.log("Coordinates",`y coord = ${evt.nativeEvent.locationY}`);
  var cordinates = {"xcor":evt.nativeEvent.locationX,
    "ycor":evt.nativeEvent.locationY,
    "name" :"Keven"}
  array.push(cordinates)
  this.setState({
    array:array
  })

 /* this.setState({
    xcor:evt.nativeEvent.locationX,
    ycor:evt.nativeEvent.locationY,
    corx:evt.nativeEvent.locationX
  })*/
}

  render() {
    var array =[];
    if(this.state.array.length != 0){
      this.state.array.map((res)=>{
        array.push(
          <View style={{position:"relative",flex:1,left:res.xcor,top:res.ycor,right:res.xcor,bottom:res.ycor}}>
           <Badge textStyle={{color: 'white',}} minWidth={18} minHeight={18} style={{marginTop: 8,marginLeft:-16}}>
                    {res.name}
                </Badge>
            <Image source={require('./logo.png')} style={{resizeMode:'cover',width:35,height:35}}>
            </Image>
          </View>
          )
      })
    }
    return (
      <View style={styles.container} >
      <View style={{position:'absolute'}} >
      <TouchableOpacity onPress={(evt) => this.handlePress(evt)}>
      <Image  source={require('./back2.jpg')} style={{resizeMode:'cover',width:windowSize.width,height:windowSize.height}}>
        </Image>
         </TouchableOpacity>

        </View>

        {this.state.array.length != 0 ?(
          <View >
                {array}
              </View>
          ):(<View></View>)
         }

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

  }
});

module.exports=index;

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
警觉的，
AlertIos，
形象,，
协调，
可触摸不透明度，
看法
}从“反应本机”；
从“react native smart Badge”导入徽章
变量维度=要求（“维度”）；
var windowSize=Dimensions.get（'window'）；
导出默认类索引扩展组件{
建造师（道具）{
超级（道具）
这个州={
xcor:null，
ycor:null，
corx:“”，
阵列：[]，
计数：0
}
}
扶手（evt）{
var array=this.state.array
变量计数=0
log（“坐标”，“x坐标=${evt.nativeEvent.locationX}`）；
log（“Coordinates”，y coord=${evt.nativeEvent.locationY}`）；
var cordinates={“xcor”：evt.nativeEvent.locationX，
“ycor”：evt.nativeEvent.Location，
“名称”：“Keven”}
array.push（cordinates）
这是我的国家({
数组：数组
})
/*这是我的国家({
xcor:evt.nativeEvent.locationX，
ycor:evt.nativeEvent.Location，
corx:evt.nativeEvent.locationX
})*/
}
render（）{
var数组=[]；
if（this.state.array.length！=0）{
this.state.array.map（（res）=>{
array.push(
{res.name}
)
})
}
返回(
这个.手柄压力（evt）}>
{this.state.array.length！=0(
{array}
):()
}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
}
});
模块导出=索引；

对不起。我不明白你的意思抱歉，我想这是你的目标我只是说，在你的例子中，得到x y值的唯一方法是当按下按钮时，我正在寻找一种不同的解决方案。你能帮我处理多点触摸的情况吗？我需要处理3接触在同一时间。我测试了你的代码，它只需要一次操作就可以工作。@Lavaraju我正在使用相同的功能。当用户触摸图像时，我希望显示标记。我尝试了你的代码，但标记没有显示在图像上。它只用于单次触摸