react-native - Airbnb React Native Maps 自定义标记，顶部居中文本

当我说 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>

最佳答案

我以前这样做过。这基本上就是我想自定义标记时所做的:

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

例子

关于react-native - Airbnb React Native Maps 自定义标记，顶部居中文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40822129/