LocationTextView.js
4.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import React, {Component} from 'react';
import {NativeModules, Text, TouchableOpacity, View} from 'react-native';
import {isJSONString} from "../utils/utils";
// 默认高度
const defaultHeight = (50);
// 默认横向内边距
const HPading = (16);
// 默认纵向内边距
const VPading = (6);
/*
地点定位组件(type:'LOCATION')
*/
export default class LocationTextView extends Component {
// 构造方法
constructor(props) {
super(props);
// 定位地址信息
this.state = {
address: ''
}
// 传入参数
this.attrData = this.props.attrData;
// json解析后的传入参数
this.extendData = (this.attrData.data && this.attrData.data.length > 0) ? JSON.parse(this.attrData.data) : {};
// 开始定位
this.onStartLocation = this.props.onStartLocation;
// 完成定位
this.onCompleteLocation = this.props.onCompleteLocation;
}
// 生命周期-组件将要展示
componentWillMount() {
// 设置默认值
let addressText = "";
if (this.attrData.value && this.attrData.value.length > 0) {
if (isJSONString(this.attrData.value)) {
let data = JSON.parse(item.value);
addressText = data.province + "," + data.city + "," + data.area;
} else {
addressText = this.attrData.value;
}
}
this.setState({address: addressText});
}
// 获取定位,靠原生方法实现定位
getAddress() {
let _this = this;
if (this.onStartLocation) {
this.onStartLocation();
}
// 最终格式通过移动端高德地图SDK的定位方法来实现定位
NativeModules.system.getLocation().then(data => {
console.log('address', data);
if (this.onCompleteLocation) {
this.onCompleteLocation();
}
if (!!JSON.parse(data).cityCode) {
let addressData = JSON.parse(data);
_this.setState({
address: addressData.formattedAddress
});
let result = {
latitude: addressData.latitude,
longitude: addressData.longitude,
ip: '',
name: addressData.formattedAddress
}
this.attrData.value = JSON.stringify(result);
} else {
}
});
// 定时3秒关闭
const timer = setTimeout(() => {
clearTimeout(timer);
if (this.onCompleteLocation) {
this.onCompleteLocation();
}
}, 3000);
}
// 绘制UI
render() {
/*
name:标题
code:代码编号
type:控件类型(LONG_TEXT)
description:描述
isRequired:是否必须
isPreview:是否预览
*/
let {name, code, type, description, isRequired, isPreview} = this.attrData;
return (
// 最外层用于触发定位的操作区域
<TouchableOpacity
activeOpacity={1}
onPress={() => this.getAddress()}
style={{
flex: 1,
minHeight: defaultHeight,
paddingVertical: VPading,
paddingHorizontal: HPading,
justifyContent: 'space-around',
backgroundColor: '#fff',
flexDirection: 'row'
}}
>
{/*标题显示区域*/}
<View style={{flexDirection: 'row', width: 50}}>
{isRequired && <Text style={{color: "#FF3030"}}>* </Text>}
{!isRequired && <Text style={{color: "#fff"}}>* </Text>}
<Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)',}}>{name || ""}</Text>
</View>
<Text
style={{
flex: 1,
fontSize: 14,
color: 'black',
backgroundColor: 'white',
textAlign: 'left',
marginLeft: 4,
marginRight: 4
}}
numberOfLines={2}>{(this.state.address && this.state.address.length > 0) ? this.state.address : ''}</Text>
{/** 获取按钮 */}
<Text style={{fontSize: 16, color: global.homeColor, width: 60, textAlign: 'right'}}
>{(this.state.address && this.state.address.length > 0) ? '刷新' : '获取'}</Text>
</TouchableOpacity>
);
}
}