自定义窗体内容中的按钮onPress无响应啊，怎么解决

dongchacha commented 6 years ago

rn版本0.56.0 amap3d版本1.0.1 ios真机

图片：

源码： import React, {Component} from 'react'; import { Text, View, Image, Platform, TouchableHighlight, Linking } from 'react-native'; import EStyleSheet from 'react-native-extended-stylesheet'; import { Say, Loading, Confirm } from '@/libs/btOverlay'; import { MapView } from 'react-native-amap3d'; import statisticsService from '@/services/statistics'; import { List, WhiteSpace, Button, WingBlank, NoticeBar, Picker, ActionSheet} from 'antd-mobile-rn'; import Ionicons from "react-native-vector-icons/Ionicons" import GConfig from '@/config' import Util from '@/libs/utils'

export default class Preload extends Component { constructor(props) { super(props); } state = { flowsCount: 0, meterCount: 0, centerPoint: null, pointList: [], currentPosition: null//当前用户定位 }

componentDidMount() {
    // navigator.geolocation.getCurrentPosition((obj) => {//获取地理位置
    //  console.log(obj);
    //  currentPosition = obj;
    // }, () => {
    //  // new Confirm({
    //  //  title: '当前页面需要使用您的定位权限',
    //  //  desc: '请开启定位权限',
    //  //  cancelText: null
    //  // })
    // });

    this.getData();
}

/**
 * 加载数据
 */
getData = async () => {
    let that = this;
    let resData = await statisticsService.getDistributionData({
        companyID: global.userInfo.company.companyId
    });

    if (resData.code === 1) {
        let noMeterCount = 0;
        let centerIndex = resData.object.length / 2;//中心点的index，有时候中心点可能位置是空的，那就取靠近这个值的那个点
        let centerPoint;
        let pointList = [];

        if(!resData.object || !resData.object.length){
            return;
        }
        for(let i = 0; i < resData.object.length; i++){
            let item = resData.object[i];
            let location = item.Location.split(',');

            if(item.SerialNumber == ''){
                noMeterCount++;
                item.color = 'red';
            } else{
                item.color = 'blur';
            }

            if(!item.Location || item.Location === ','){
                continue;
            }

            if(location[0] && location[1]){
                item.location = {
                    latitude: parseFloat(location[1]),
                    longitude: parseFloat(location[0]),
                };
                pointList.push(item);

                item.index = i;
                if(!centerPoint || Math.abs(i - centerIndex) < Math.abs(centerPoint.index - centerIndex)){
                    centerPoint = item;
                }
            }
        }

        that.setState({
            dataList: resData.object,
            centerPoint: {
                location: centerPoint.location
            },
            flowsCount: resData.object.length,
            meterCount: resData.object.length - noMeterCount,
            pointList: pointList
        });
    } else {
        new Say(resData.message);
    }
};

//跳到百度或者高德地图
showMapActionSheet(item){
    ActionSheet.showActionSheetWithOptions(
        {
          title: '选择应用导航到该地点',
        //   message: 'Description',
          options: [
              '百度地图',
              '高德地图',
              '取消',
          ],
          cancelButtonIndex: 2,//按钮列表中取消按钮的索引位置
        },
        (buttonIndex) => {
            let linkUrl;

            if(buttonIndex === 0){
                linkUrl = `baidumap://map/navi?location=${item.location.latitude},${item.location.longitude}`;
            } else if(buttonIndex === 1){
                if(Util.isIos){
                    linkUrl = `iosamap://navi?sourceApplication=${GConfig.appName}&poiname=${item.Client}&poiid=BGVIS&lat=${item.location.latitude}&lon=${item.location.longitude}&dev=1&style=2`;
                } else{
                    linkUrl = `androidamap://navi?sourceApplication=${GConfig.appName}&lat=${item.location.latitude}&lon=${item.location.longitude}&dev=1&style=2&poiname=${item.Client}`;
                }
            }

            if(linkUrl){
                Linking.canOpenURL(linkUrl).then(supported => {
                    if (!supported) {
                        new Say('打开失败，未安装该应用')
                    } else {
                        return Linking.openURL(linkUrl);
                    }
                }).catch(err => new Say('打开失败，未安装该应用'));
            }
        },
    );
}

render() {
    return <View style={styles.wrapper}>
        <View style={styles.tipBar}>
            <Text style={styles.tipText}>
                蓝色图标表示已安装远传设备，红色图标表示未安装远传设备
            </Text>
            <WhiteSpace/>
            <Text style={styles.tipText}>
                <Text activeOpacity={0.7}>流量计总数量:</Text><Text style={styles.tipCount}>{this.state.flowsCount}&nbsp;&nbsp;</Text>
                <Text>已安装远传设备的流量计数量:</Text><Text style={styles.tipCount}>{this.state.meterCount}</Text>
            </Text>
        </View>
        {
            this.state.centerPoint !== null ?
            <MapView
            zoomLevel={11}
            style={styles.mapBox}
            coordinate={this.state.centerPoint.location}>
            {this.state.pointList.map((item, index) => {
                return <MapView.Marker
                    key={index}
                    // clickDisabled={false}
                    icon={() => (
                        <Image source={item.color === 'red' ? require('@/imgs/mark_r.png') : require('@/imgs/mark_b.png')} />
                    )}
                    // image='flag'
                    // color="green"
                    coordinate={item.location}>
                    <View style={styles.customInfoWindow}>
                        <Text style={styles.overlayInfoText}>{item.Client}:{item.InstallPlace}</Text>
                        <Text style={styles.overlayInfoText}>表具出厂编号、型号:{item.FlowSerial} {item.FlowTypeName}</Text>
                        <Text style={styles.overlayInfoText}>远程设备编号、型号:{item.SerialNumber} {item.MeterTypeName}</Text>
                        <TouchableHighlight style={styles.locationBox} onPress={this.showMapActionSheet.bind(this, item)} activeOpacity={0.7}>
                            <Ionicons name="ios-pin" style={styles.locationIcon} />
                        </TouchableHighlight>
                        <Image style={styles.overlayArrow} source={require('@/imgs/iw3.png')} />
                    </View>
                </MapView.Marker>
                })
            }
            </MapView>
            : null
        }
    </View>;
}

}

const styles = EStyleSheet.create({ wrapper: { flex: 1 }, tipBar: { backgroundColor: '#00edff63', color: '$red', padding: 10, borderBottomWidth: 1, borderBottomColor: '$lineColor' }, tipText: { // color: '$red', fontSize: 14, // marginBottom: 10, lineHeight: 20 }, tipCount: { // fontWeight: 'bold', fontSize:18, color: '$red' }, mapBox: { flex: 1, backgroundColor: 'red' }, customInfoWindow: { flex: 1, padding: 10, borderRadius: 3, backgroundColor: '#fff', marginTop: -73, marginLeft: -85, borderWidth: 1, borderColor: '$lineColor', position: 'relative', paddingRight: 60 }, overlayInfoText: { fontSize: 12, lineHeight: 20 }, locationBox: { position: 'absolute', right: 10, top: 20, // flex: 1, width: 40, height: 40, backgroundColor: '#48be39', borderRadius: 10, // textAlign: 'center', alignItems: 'center', borderRadius: 20, paddingTop: 5 }, locationIcon: { fontSize: 30, color: '#fff' }, overlayArrow: { position: 'absolute', bottom: -25, left: 80, zIndex: 10 } });