如何在反应本机地图中在多边形顶部添加类似于内容叠加的infoxbox？

Question

我正在尝试使用react native将现有的Web应用程序转换为本地IOS应用程序。在我的网络应用程序中，我有一个屏幕来渲染Google Maps并在其上具有多边形，并且我以前使用GMaps javascript Api提供的信息框在其顶部渲染了text + Image内容。

当我切换到React native时，我找不到类似的功能。我一直在尝试将文本作为子元素（也嵌套在View中）添加到react native maps Polygon。但是渲染的文本固定在屏幕中，并且在平移地图时不会移动并停留在多边形内。以下是React native中我的地图屏幕的片段：

我们非常感谢您的帮助！

import React, { Component } from 'react';
import {
  Alert,
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  View,
 
} from 'react-native';
import { connect } from 'react-redux';

import { bindActionCreators } from 'redux'
import { ActionCreators } from '../Actions'
//import { createStackNavigator } from 'react-navigation';


import MapView, { Polygon, Marker, Callout,PROVIDER_GOOGLE } from 'react-native-maps';
export   class AGPWorkOrder extends Component{

  constructor(props){
    super(props);
    this.PolygonArray = [];
  }
    componentWillMount(){
    //getting polygon list
    }
  
    
    render() {
      
  
      
      return (
  
        <View style = {styles.container}>
        <MapView
        provider={PROVIDER_GOOGLE}
        style={ styles.container}
      initialRegion={{
        latitude: this.PolygonArray[0].coordinates[0].latitude,
        longitude: this.PolygonArray[0].coordinates[0].longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >

   {this.PolygonArray.map(polygon => (
     <View key={polygon.workorder} >
            <Polygon
              
              coordinates={polygon.coordinates}
              holes={polygon.holes}
              strokeColor="#F00"
              fillColor="rgba(255,0,0,0.5)"
              strokeWidth={1}
              title = {polygon.workorder}
            >
            <View style = {styles.WOPolyLabelView}>
             <Text style = {styles.WOPolyLabelText}> 
      {polygon.workorder}</Text>
             </View>
             
            </Polygon>
           
              </View>))}
  
    </MapView>
    </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
      height:'100%',
      width:'100%'
    },
    WOPolyLabelView : {
      flex: 1,
justifyContent: 'center',
alignItems: 'center',

    },
    WOPolyLabelText : {
       fontSize : 20
    }
  
  });

  function mapDispatchToProps(dispatch) {
    return bindActionCreators(ActionCreators, dispatch);
  }
  
  function mapStateToProps(state) {
    console.log(this.props);
    console.log(state);
    return {
     

     
    };
  }
  
  
  export default connect(mapStateToProps, mapDispatchToProps)(AGPWorkOrder);