reactjs - 在 React Native 中，多个标记未显示在 map 上

Question

我试图在 map 上显示多个标记，但标记没有显示并且没有错误，所以我无法解决它，所以基本上我试图从状态获取坐标并尝试显示多个标记由于我是原生 react 新手，我可能会做一些愚蠢的错误。

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps'


export default class App extends Component {
  render() {
    this.state = {
      markers: [{
        title: 'hi',
        coordinates: {
          latitude: 3.148561,
          longitude: 101.652778
        },
      },
      {
        title: 'hello',
        coordinates: {
          latitude: 3.149771,
          longitude: 101.655449
        },

      },
      {
        title: 'hey',
        coordinate: {
          latitude: 33.5336684,
          longitude: 131.3420892
        },

      },
      {
        title: 'heyThere',
        coordinate: {
          latitude: 24.8345714,
          longitude: 67.3589759
        }
      }
      ]
    }
    return (

      <MapView
        style={{ flex: 1 }}
        showsUserLocation={true}

      >
        {this.state.markers.map((marker, index) => (
          <MapView.Marker key={index}
            coordinate={marker.coordinates}
            title={marker.title}
          />
        ))}
      </MapView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Answer 1

移动

this.state = {
      markers: [{
        title: 'hi',
        coordinates: {
          latitude: 3.148561,
          longitude: 101.652778
        },
      },
    ...

到构造函数或将其保留在类中(从 render 函数中删除)。

标记数组中有拼写错误。为标记数组中的所有元素设置相同的键(当前您有坐标和坐标)。

如果不渲染 MapView，还可以尝试将 MapView 的样式更改为 { width: '100%', height: '100%' }。