React Native从零单排3 地图组件

RN版本：0.63.4
系统：Win10

前言

本系列文档是React Native学习笔记，主要记录学习过程中遇到的问题和注意点。如果有人希望按照此文档开始学习，那么最好有一些Android和前端开发基础，因为此文档只会记录作者的学习过程中的重点难点,而不会详细列出每一个步骤。

1.引入地图组件

在国内，由于墙的存在，没有办法直接使用react native自带的地图组件，百度地图和高德地图也没有针对react native的官方组件，所以只能使用第三方基于android和ios端地图魔改的组件，我这边通过比较最终还是选择了lovebing魔改的百度地图,node包地址在 https://www.npmjs.com/package/react-native-baidu-map 有兴趣的话也可以自己看一下。
使用前需确认自己当前环境符合以下要求

JS:
node: 12+
react-native: 0.50.+ 2.Android
Android SDK: api 28+
gradle: 4.10.1
Android Studio: 3.1.3+
iOS:
XCode: 11.3+

确认符合之后，通过以下方式引入node包

1. npm: node install react-native-baidu-map
2. yarn: yarn add react-native-baidu-map

然后就要针对android和ios分别配置了

2.Android:

AndroidManifest.xml：节点

3.IOS

ios端的Key只需要在页面上配置

import { BaiduMapManager } from 'react-native-baidu-map'
// 此处请务必确认Key对应的平台是IOS
BaiduMapManager.initSDK('申请的百度地图的Key');

4.常见问题

The 'Pods-xx' target has libraries with conflicting names: libcrypto.a and libssl.a.

解决方案

1、首先package.json文件中删除"react-native-baidu-map"，然后yarn install,
2、然后到iOS目录下，pod install ,然后打开***.xcworkspace工程项目，删除Pods/OpenSSL-Universal/Static/Support Files/底下的libssl.a和libcrypto.a
3、然后返回上级目录，package.json文件中添加"react-native-baidu-map"，然后yarn install,
4、然后到iOS目录下，pod install --no-repo-update，就可以了

5.使用定位

import React, { useState } from 'react';
import { SafeAreaView,  StyleSheet, ScrollView, View, Text, StatusBar, Button, Dimensions } from 'react-native';
import { BaiduMapManager, MapView, MapTypes, Geolocation, Overlay, MapApp } from 'react-native-baidu-map';

BaiduMapManager.initSDK("申请的IOS Key");

// 获取屏幕大小
const { height, width } = Dimensions.get('window');

const App = () =>  {
  const [location, setLocation] = useState({});
  const [center, setCenter] = useState({ longitude: 113.950453, latitude: 22.546045 });
  const [markers, setMarkers] = useState([
    {
      location: {
        longitude: 113.960453,
        latitude: 22.546045
      }
    },
    {
      location: {
        longitude: 113.961453,
        latitude: 22.547045
      }
    },
    {
      location: {
        longitude: 113.962453, 
        latitude: 22.548045
      }
    },
    {
      location: {
        longitude: 113.963453, 
        latitude: 22.545045
      }
    },
    {
      location: {
        longitude: 113.964453, 
        latitude: 22.544045
      }
    }
  ]);

  return (
    <>
    
      
        
          
            
              
              
                
                
                
                
                
                
              
              
                {markers.map((marker, index) => )}