javascript - 如何为反应图中的标记添加多行描述？

Question

我正在开发一个反应原生应用程序，其中包括一个反应地图和一些标记，每个标记都有描述。每个描述都太长而无法放在一行中，但是当我尝试将其设置为多行字符串时：

const description = `Info1: Data 
Info2: Data
Info3: Data`

return (
  <MapView.Marker
    key = {index}
    coordinate = {marker.coords}
    title = {marker.country}
    description = {description}
  />
)

描述的下面几行是隐藏的，不能展开：

如何覆盖它并显示有关标记的所有信息？

标签： javascriptreact-nativereact-native-maps

Answer 1

您正在寻找自定义Callout的方法。您需要将自定义标注视图传递给您的标记。请参见下面的示例。

代码：

<MapView 
       style={{top: 0, left:0 , bottom: 0, right: 0, position: 'absolute'}}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
       >
    <MapView.Marker 
    coordinate={{latitude: 37.78825, longitude: -122.4324 }}>
      <MapView.Callout>
        <View style={{height: 100, width: 200}}>
          <Text> Title </Text>
          <Text> Long Description    Even More Text</Text>
          <Text>Multline Description </Text>
        </View>
      </MapView.Callout>
    </MapView.Marker>
</MapView>

输出：

演示：

https://snack.expo.io/@tim1717/quiet-crackers