我是react native的新手,想问一下如何在 map 中渲染多个标记.

这是我的密码

课堂内:-

constructor(props) {
super(props);

  this.state = {
   coordinate: ([{
     latitude: 3.148561,
     longitude: 101.652778,
     title: 'hello'
   },
   {
     latitude: 3.149771,
     longitude: 101.655449,
     title: 'hello'
   }
  ]),
 };

}

内部渲染:-

<MapView
        style={styles.map}
        showsUserLocation={true}
        followUserLocation={true}
        zoomEnabled={true}
        //annotations={markers}
      >  
            <MapView.Marker
              coordinate={this.state.coordinate}
              title={this.state.coordinate.title}
            />
      </MapView>

我想在 map 中渲染这两个标记,但我不知道如何在react native中创建循环来渲染它.我已经try 了文档中的内容,但仍然不起作用.

提前感谢:)

推荐答案

coordinate.房产建造不当.像这样做-

this.state = {
  markers: [{
    title: 'hello',
    coordinates: {
      latitude: 3.148561,
      longitude: 101.652778
    },
  },
  {
    title: 'hello',
    coordinates: {
      latitude: 3.149771,
      longitude: 101.655449
    },  
  }]
}

内部渲染

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

React-native相关问答推荐

如何重复使用expo 音频对象S录音?

RTK 查询显示互联网何时关闭?

用图像 react native 动画进度条

_react2.default.PropTypes.function 未定义

在根项目ReactNativeStarter中找不到任务installRelease

什么时候适合在 React 中使用构造函数?

带有 SafeAreaView-wrapper 的 react-native Modal 不起作用

如何更改 React Native(android)应用程序的远程推送通知图标

在 React Native 中计算两个 lat+lng 坐标之间的距离?

React-native 解码 base64 编码字符串

React Native 有全局作用scope域吗?如果没有,我该如何模仿它?

React-Native iOS - 如何通过按下按钮从 React-Native 视图导航到非 React-Native 视图(本机 iOS 视图控制器)?

java.lang.ClassNotFoundException:在路径上找不到类.MainActivity:DexPathList react-native

react native图像不适用于特定 URL

React Native 元素搜索栏边界线未清除

创建新的 react-native 元素时出现Unexpected token import错误

占位符文本在(多行)TextInput for Android(React Native)中的位置

horizontal水平 FlatList 前后的间距

React Navigation 中的选项卡导航器图标

开始滚动时使 TouchableOpacity 不突出显示元素