Airbnb React Native Maps custom marker with center

问题:

When I say React Native Maps I refer to this module: https://github.com/airbnb/react-native-maps

How can I center the text on top of this marker such that it works for any screen size on both ios and android? In the screenshot above the text appears to the top left of the marker. It's a 1.

Code included below. Thanks for any guidance!

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

回答1:

I have done that before. It's basically that what I do when I want to customize a marker:

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

Styles

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

Example