Airbnb React Native Maps自定义标记,顶部居中文字

Question

当我说React Native Maps时我引用这个模块:https://github.com/airbnb/react-native-maps

如何将文本置于此标记的顶部,以便它适用于ios和android上的任何屏幕大小？在上面的屏幕截图中,文本显示在标记的左上角.这是1.

代码包括在下面.谢谢你的指导!

 <MapView.Marker
  style ={{zIndex: this.state.selectedMarker === marker ? 1 : 0}}
  key={marker.id}
  image={require('../../assets/marker-with-label/marker-with-label.png')}
  coordinate={marker.coordinate}
  >
  <Text>1</Text>
</MapView.Marker>

Answer 1

我以前做过那个.这基本上就是我想要自定义标记时的操作:

<MapView.Marker  coordinate={marker.latlang}>
  <View style={styles.circle}>
     <Text style={styles.pinText}>{marker.num}</Text>
   </View></MapView.Marker>

样式

circle: {
    width: 30,
    height: 30,
    borderRadius: 30 / 2,
    backgroundColor: 'red',
},
pinText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
    fontSize: 20,
    marginBottom: 10,
},

例