在MapView中反应本机对话框

Question

我试图将Dialog组件放入MapView内，但是只有在地图卸载后才显示此组件（太奇怪了）。我正在使用react-native-popup-dialog，但是我也尝试过使用其他库并且遇到相同的问题。我不知道我在做什么错，因为如果在代码中用文本替换此Dialog组件，则文本将正确显示。

Map.js

<View style={[styles.container, { backgroundColor: colors.white }]}>
  <MapView
    ref={mapRef}
    key={key}
    mapType="standard"
    rotateEnabled={false}
    showsUserLocation={showsUserLocation}
    renderToHardwareTextureAndroid={true}
    loadingEnabled={true}
    loadingIndicatorColor={colors.primary}
    initialRegion={initialRegion}
    provider={PROVIDER_GOOGLE}
    customMapStyle={mapStyle}
    style={styles.map}
  >
    {marker && marker.coordinate && (
      <MapView.Marker
        key={marker.id}
        coordinate={marker.coordinate}
        title={marker.title}
        pinColor={colors.primary}
      />
    )}
  </MapView>
  <AnimatedDialog visible title="Hello" text="Example"/> {/*MY CUSTOM COMPONENT*/}
</View>

AnimatedDialog.js

<Dialog
  useNativeDriver={true}
  visible={visible}
  rounded
  dialogAnimation={
    new SlideAnimation({
      slideFrom: "bottom",
    })
  }
  dialogTitle={<DialogTitle title={title} />}
  footer={
    <DialogFooter>
      <DialogButton
        text="CANCEL"
        onPress={() => {}}
      />
      <DialogButton text="OK" onPress={() => {}} />
    </DialogFooter>
  }
>
  <DialogContent>
    <Text>{text}</Text>
  </DialogContent>
</Dialog>