React-Native:当我单击多个位置(如 X 和 Y 坐标)时,如何获得多个标记图像 [英] React-Native:How Can I get multiple marker images, When I clicking On multiple Positions(like X and Y coordinates)
本文介绍了React-Native:当我单击多个位置(如 X 和 Y 坐标)时,如何获得多个标记图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在 React native 中开发示例应用程序.实际上,当我单击图像上的特定位置时,获取相应的 x 和 y 坐标.但是在那个位置我想在多个时间和多个位置显示标记
I am Developing an sample Application in React native.Actually when i am Clicking on Particular Position On an image, getting the Corresponding x and y co-ordinates.But at that position I want to Display marker at multiple times and multiple positions
这是我的显示代码:
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}`);
}
这是我的屏幕截图,仅显示坐标:
我想要这种同时显示位置的图片或图标
谁能帮我解决这个问题.
Can anyone help me to Solve this.
推荐答案
我终于解决了我的问题:
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;
这篇关于React-Native:当我单击多个位置(如 X 和 Y 坐标)时,如何获得多个标记图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文