您如何向反應圖中的標記添加多行描述？

Question

我正在開發一個反應本機應用程序，其中包括一個反應圖和一些標記，每個標記都有一個描述。 每個描述都太長而無法放在一行中，但是當我嘗試將其設為多行字符串時：

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

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

描述的下面幾行是隱藏的，無法展開：

如何覆蓋它並顯示有關標記的所有信息？

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