LocationTextView.js 3.7 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    NativeModules
} from 'react-native';
import {isJSONString} from "../utils/utils";
const defaultHeight = (50);
const HPading = (16);
const VPading = (6);
export default class LocationTextView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            address: ''
        }
        this.attrData = this.props.attrData;
        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();
        }
        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 {
                return;
            }
        });
        // 定时3秒关闭
        const timer = setTimeout(() => {
            clearTimeout(timer);
            if (this.onCompleteLocation) {
                this.onCompleteLocation();
            }
        }, 3000);
    }

    render() {
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        let {placeholder, buttonText} = this.extendData;

        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>
        );
    }
}