react-native - 在 MapView.Callout 中使用 onPress 总是会触发

Question

当用户在我的地图上选择一个图钉时，我正在使用 MapView.Callout 显示一个弹出窗口。

当我在该弹出窗口中添加一个定义了 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>
    );
}

如何避免这种情况发生？这发生在地图本身的负载上，而不是当用户点击任何给定的图钉时......

Answer 1

尝试这个：

onPress={()=>{ window.alert('button pressed') }}

Answer 2

使用 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>