当前位置:  开发笔记 > 编程语言 > 正文

React-Native:当我单击On multiple Positions(如X和Y坐标)时,如何获得多个标记图像

如何解决《React-Native:当我单击OnmultiplePositions(如X和Y坐标)时,如何获得多个标记图像》经验,为你挑选了1个好方法。

我正在使用React native开发一个示例应用程序.实际上,当我在图像上单击特定位置时,获取对应的x和y坐标.但是在该位置我想要多次显示标记和多个位置

这是我的显示代码:

return (


      
       this.handlePress(evt)}>
      
         
         
      
    );

我的OnPress功能是:

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

这是我的ScreenShot只显示坐标:

在此输入图像描述

我想要这种类型同时显示图像或图标的位置

在此输入图像描述

任何人都可以帮我解决这个问题.



1> Lavaraju..:

最后我解决了我的问题:

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(
          
           
                    {res.name}
                
            
            
          
          )
      })
    }
    return (
      
      
       this.handlePress(evt)}>
      
        
         

        

        {this.state.array.length != 0 ?(
          
                {array}
              
          ):()
         }

      
    );
  }
}

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

  }
});

module.exports=index;

推荐阅读
kikokikolove
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有