在 MapView.Callout 内使用 onPress 总是触发
Using onPress inside MapView.Callout always fires
当用户在我的地图上选择图钉时,我正在使用 MapView.Callout 显示弹出窗口 window。
当我在该弹出窗口 window 中添加一个定义了 onPress() 方法的按钮时,该方法总是在填充状态时触发。即,在加载时 - 我从下面的代码中收到一堆警报:
render() {
const {name, type} = this.props;
return (
<Card
containerStyle={styles.bubble}
title={name}
image={this.selectImage({type})}>
<Button
icon={{name: 'contact-phone'}}
backgroundColor='#80A33F'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
title='Book Now'
onPress={window.alert('button pressed')}
/>
</Card>
);
}
如何避免这种情况发生?这发生在地图本身的加载上,而不是当用户点击任何给定的图钉时...
试试这个:
onPress={()=>{ window.alert('button pressed') }}
使用 npm i react-native-simple-dialogs
我这样解决了我的问题
import { Dialog } from 'react-native-simple-dialogs';
<MapView.Marker
identifier={item.localId}
coordinate={{latitude: item.location.lat,
longitude: item.location.lng}}
onPress={() => this.setState({dialogVisible:true,item:item})}
>
<Fa name="map-marker" style={{color:"#673AB7",fontSize:50}} />
</MapView.Marker>
<Dialog
visible={this.state.dialogVisible}
onTouchOutside={() => this.setState({dialogVisible: false})} >
<Button
onPress={()=>this.setState({dialogVisible:false})}
transparent style={{alignSelf:'right',position:'absolute',right:5}}>
<Text><Fa style={{fontSize:30,color:"#673AB7"}} name="close"></Fa>
</Text>
</Button>
<View style={{flexDirection:"row"}}>
<Text style={{fontWeight: "bold"}}>Name : </Text>
<Text>{this.state.item.displayName}</Text></View>
<Button
onPress={()=>{this.setState({dialogVisible:false});
this.chatNavigate(this.state.item)}}
full iconLeft style={{backgroundColor:"#673AB7",width:300}}
>
<Icon name='md-chatbubbles' style={{color:'#fff'}}/>
<Text style={{color:"#fff"}}>Chat</Text>
</Button>
</Dialog>
当用户在我的地图上选择图钉时,我正在使用 MapView.Callout 显示弹出窗口 window。
当我在该弹出窗口 window 中添加一个定义了 onPress() 方法的按钮时,该方法总是在填充状态时触发。即,在加载时 - 我从下面的代码中收到一堆警报:
render() {
const {name, type} = this.props;
return (
<Card
containerStyle={styles.bubble}
title={name}
image={this.selectImage({type})}>
<Button
icon={{name: 'contact-phone'}}
backgroundColor='#80A33F'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
title='Book Now'
onPress={window.alert('button pressed')}
/>
</Card>
);
}
如何避免这种情况发生?这发生在地图本身的加载上,而不是当用户点击任何给定的图钉时...
试试这个:
onPress={()=>{ window.alert('button pressed') }}
使用 npm i react-native-simple-dialogs
我这样解决了我的问题
import { Dialog } from 'react-native-simple-dialogs';
<MapView.Marker
identifier={item.localId}
coordinate={{latitude: item.location.lat,
longitude: item.location.lng}}
onPress={() => this.setState({dialogVisible:true,item:item})}
>
<Fa name="map-marker" style={{color:"#673AB7",fontSize:50}} />
</MapView.Marker>
<Dialog
visible={this.state.dialogVisible}
onTouchOutside={() => this.setState({dialogVisible: false})} >
<Button
onPress={()=>this.setState({dialogVisible:false})}
transparent style={{alignSelf:'right',position:'absolute',right:5}}>
<Text><Fa style={{fontSize:30,color:"#673AB7"}} name="close"></Fa>
</Text>
</Button>
<View style={{flexDirection:"row"}}>
<Text style={{fontWeight: "bold"}}>Name : </Text>
<Text>{this.state.item.displayName}</Text></View>
<Button
onPress={()=>{this.setState({dialogVisible:false});
this.chatNavigate(this.state.item)}}
full iconLeft style={{backgroundColor:"#673AB7",width:300}}
>
<Icon name='md-chatbubbles' style={{color:'#fff'}}/>
<Text style={{color:"#fff"}}>Chat</Text>
</Button>
</Dialog>