React-Native：複数の位置（X座標やY座標など）をクリックすると、複数のマーカー画像を取得できますか？

Question

私はReact nativeでサンプルアプリケーションを開発しています。私は複数回にマーカーを表示することの位置に対応するxとyの共同ordinates.Butを取得し、複数の位置

を。これは、表示するための私のコードです：

return (


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

マイたonPress関数であります：

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

ここではそれが唯一の座標を表示私のスクリーンショットです：

私は同じ時間画像やアイコンでこのタイプの示す位置を望んも

誰でも私をSolveに助けることができますかこの。

Answer 1

最後に私は私の問題を解決：

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;