时间戳

首页 > 解决方案 > 为什么我的地图标记在 React Native 中通过 .map() 生成时不呈现？

javascript - 为什么我的地图标记在 React Native 中通过 .map() 生成时不呈现？

问题描述

react-native-maps通过Wifi 在 Android 外部设备上使用 React Native 。

我制作了一个名为 MapMarker 的组件，它采用 propstitle和coordinates. 在我的内部<MapView></MapView>，我可以像这样渲染它：

<MapMarker
  coordinates={{
      longitude: -4.516095,
      latitude: 55.679897
  }}
  title="James"
/>

但我想动态渲染我的标记，所以我设置了一个状态，如：

    mapMarkers: [
        {
            latLng: {
                latitude: 55.679897,
                longitude: -4.516095,
            },
            title: "James"
        }
    ]

当我尝试使用 映射此状态时.map()，它似乎没有命中组件。我知道这一点，因为我的组件console.warn()内部有一个<Marker>。这就是我使用该.map()功能的方式：

 {this.state.mapMarkers.map((marker) => {
    <MapMarker
       coordinates={{
           longitude: marker.latLng.longitude,
           latitude: marker.latLng.latitude
       }}
       title={marker.title}
   />
 })}

使用第二种方法，console.warn()（放在 中的componentDidMount()）不会被触发。我已经将纬度和纬度倾倒this.state.mapMarkers[0].longitude在主屏幕上，它们都是正确/可见的。

来自 Vue 背景，所以不是 100% 我需要.map()对渲染组件做不同的事情。

标签： javascriptreactjsgoogle-mapsreact-native

解决方案

确保您返回您正在创建的 React 组件。最简单的方法是利用箭头函数并使用括号而不是函数括号。

 {this.state.mapMarkers.map((marker) => (
    <MapMarker
       coordinates={{
           longitude: marker.latLng.longitude,
           latitude: marker.latLng.latitude
       }}
       title={marker.title}
   />
 ))}

推荐阅读