REACT NATIVE | HMS 사이트 키트 설치 및 사용 방법

8498 단어 reactnativehms
소개하다.
안녕하세요.본고에서 화웨이 모바일 서비스(HMS)가 react native에 대한 사이트 패키지 플러그인을 살펴보겠습니다.HMS 사이트 키트를 설치하고 사용하는 방법에 대해 설명합니다.
HMS 사이트 키트는 다음과 같은 기능을 제공합니다.
키워드 검색: 사용자가 입력한 키워드에 따라 위치 목록을 되돌려줍니다.
근처 검색: 사용자 장치의 현재 위치에 따라 근처 위치를 검색합니다.
사이트 세부 정보: 사이트에 대한 세부 정보를 검색합니다.
사이트 검색 제안: 사이트 제안 목록으로 돌아갑니다.
우리가 시작하기 전에 화웨이 개발자 계정을 가지고 있어야만 화웨이 모바일 서비스를 사용할 수 있고 HMS 사이트 도구 패키지를 사용할 수 있습니다.당신은 이곳에서 화웨이 개발자 사이트에 로그인/등록할 수 있습니다.
AppGallery Connect에서 프로젝트 구성
우선 화웨이 모바일 서비스와 응용 프로그램을 통합해야 합니다.나는 응용 프로그램을 어떻게 통합하는지 상세하게 소개하지 않지만, 당신은 본문을 단계적인 지침으로 사용할 수 있습니다.
장치
우선 창고를 설치합시다.npm i @hmscore/react-native-hms-site설치가 완료되면 라이브러리를 가져올 수 있습니다.import RNHMSSite from '@hmscore/react-native-hms-site'HMS 사이트 키트의 기능을 사용하기 전에우리는 그것을 초기화해야 한다.서비스를 초기화하려면 API 키가 필요합니다.응용 프로그램을 HMS와 통합하면 AppGallery Connect에서 자동으로 API 키를 제공합니다.AppGallery Connect>Your App>Project Settings>General information>App information에서 API 키를 찾을 수 있습니다.
이왕 우리가api 키를 가지고 있는 이상initialize 서비스 함수를 호출합니다.
const config = {
apiKey: '<Your_API_KEY>' // You can find it in AppGallery Connect > YourApp > Project Settings > General information > App information};

RNHMSSite.initializeService(config)
.then(() => {
    console.log('Service is initialized successfully');
})
.catch((err) => {
    console.log('Error : ' + err);
 });
API 키가 올바르면 서비스 초기화가 콘솔에 표시됩니다.
사용법
이제 HMS React 네이티브 사이트 키트를 사용할 수 있습니다.키워드 검색부터 시작합시다.
키워드(텍스트) 검색
HMS Site kit 키워드 검색 기능을 사용하여 사용자의 키워드 입력에 따라 위치 목록을 반환할 수 있습니다.검색 결과가 표시될 위치를 지정할 수도 있습니다.검색 반지름, 국가, 언어 및 페이지 크기를 지정할 수 있습니다.키워드 검색의 경우 POI를 기준으로 결과를 필터링하는 POI를 설정할 수 있습니다.사용자는 빵집, 학교, 현금인출기 등을 검색할 수 있다.
키워드 검색의 요청 주체로 사용되는 TextSearchRequest 객체를 만듭니다.관련 매개변수는 다음과 같습니다. 여기서 질의는 필수이고 다른 매개변수는 옵션입니다.
질의: 키워드를 검색합니다.
위치: 검색 결과에 편향된 경도와 위도가 필요합니다.
반지름: 반지름을 미터 단위로 검색합니다.이 값의 범위는 1부터 50000까지입니다.기본값은 50000입니다.
POI 유형: POI 유형.이 값 범위는 LocationType의 값 범위와 같습니다.
countryCode: ISO 3166-1 alpha-2 표준을 준수하는 검색 위치 국가의 코드입니다.
언어: 검색 결과를 표시하는 언어입니다.값 범위에 대한 자세한 내용은 언어 매핑의 언어 코드를 참조하십시오.이 매개 변수가 전달되지 않으면, 조회 필드의 언어를 우선적으로 사용합니다.현장 언어를 사용할 수 없으면 현지 언어를 사용합니다.
페이지크기: 페이지당 레코드 수입니다.이 값의 범위는 1부터 20까지입니다.기본값은 20입니다.
페이지Index: 현재 페이지 번호입니다.이 값의 범위는 1에서 60까지입니다.기본값은 1입니다.
이후에 textSearch 함수를 호출하여 TextSearchRequest 대상을 다음과 같은 매개 변수로 보낼 수 있습니다.
우리 파리에 가서 국제학교를 찾읍시다
const onTextSearch = () => {
let textSearchReq = {
    query: 'International',
    location: {
        lat: 48.893478,
        lng: 2.334595,
    },
    radius: 1000,
    countryCode: 'FR',
    language: 'en',
    pageIndex: 1,
    pageSize: 1,
    poiType: RNHMSSite.LocationType.SCHOOL
};
RNHMSSite.textSearch(textSearchReq)
    .then((response) => {
        console.log(JSON.stringify(response));
    })
    .catch((err) => {
        console.log(JSON.stringify(err));
    });
};
json의 응답은 이렇습니다. 보시다시피 처리할 수 있는 정보가 많습니다.
{
"totalCount": 1,
"sites": [
    {
        "siteId": "FB3941B313927D74413FFF0E883144FE",
        "poi": {
            "rating": 0,
            "poiTypes": [
                "SCHOOL"
            ],
            "phone": "+(33)-(1)-42000679",
            "openingHours": {},
            "internationalPhone": "+(33)-(1)-42000679"
        },
        "viewport": {
            "southwest": {
                "lng": 2.3455935548062814,
                "lat": 48.87367776679441
            },
            "northeast": {
                "lng": 2.3494610451937183,
                "lat": 48.87622143320559
            }
        },
        "name": "Acting International",
        "formatAddress": "15, Rue Ambroise Thomas, 75009, 9e Arrondissement, Paris, Ile-de-France, France",
        "address": {
            "subLocality": "9e Arrondissement",
            "subAdminArea": "Paris",
            "postalCode": "75009",
            "thoroughfare": "Rue Ambroise Thomas",
            "countryCode": "FR",
            "locality": "Paris",
            "country": "France",
            "adminArea": "Ile-de-France"
        },
        "distance": 2269.4454697030014,
        "location": {
            "lng": 2.3475273,
            "lat": 48.8749496
        }
    }
]
}
근처
HMS Site kit Nearest search feature는 사용자의 현재 위치를 가까운 위치로 되돌려 주는 기능을 제공합니다.검색 키워드, 검색 반지름, 언어 및 페이지 크기도 지정할 수 있습니다.가까운 검색의 경우 POI를 기준으로 결과를 필터링하는 POI(관심사)를 설정할 수 있습니다.사용자는 빵집, 학교, 현금인출기 등을 검색할 수 있다.
가까운 곳에서 검색할 요청 주체로 사용되는 NearbySearchRequest 대상을 만듭니다.관련 매개 변수는 다음과 같습니다. 여기서 위치는 필수입니다. 기타는 옵션입니다.
위치: 검색 결과에 편향된 경도와 위도가 필요합니다.
반지름: 반지름을 미터 단위로 검색합니다.이 값의 범위는 1부터 50000까지입니다.기본값은 50000입니다.
질의: 키워드를 검색합니다.
POI 유형: POI 유형.이 값 범위는 LocationType의 값 범위와 같습니다.
언어: 검색 결과를 표시하는 언어입니다.값 범위에 대한 자세한 내용은 언어 매핑의 언어 코드를 참조하십시오.이 매개 변수가 전달되지 않으면, 조회 필드의 언어를 우선적으로 사용합니다.현장 언어를 사용할 수 없으면 현지 언어를 사용합니다.
페이지크기: 페이지당 레코드 수입니다.이 값의 범위는 1부터 20까지입니다.기본값은 20입니다.
페이지Index: 현재 페이지 번호입니다.이 값의 범위는 1에서 60까지입니다.기본값은 1입니다.
그런 다음 nearby Search 함수를 호출하여 Nearby Search Request 객체를 다음 매개 변수로 보낼 수 있습니다.
우리 근처에서 현금인출기를 한 대 찾읍시다.
const onNearbySearch = () => {
let nearbySearchReq = {
    location: {
        lat: 51.500775,
        lng: -0.115756,
    },
    query: 'BANK',
    radius: 1000,
    poiType: RNHMSSite.LocationType.ATM,
    language: 'en',
    pageIndex: 1,
    pageSize: 1
};
RNHMSSite.nearbySearch(nearbySearchReq)
    .then((response) => {
        console.log(JSON.stringify(response));
    })
    .catch((err) => {
        console.log(JSON.stringify(err));
    });
};
json의 응답은 이렇습니다. 보시다시피 처리할 수 있는 정보가 많습니다.
{
"totalCount": 1,
"sites": [
    {
        "siteId": "7B4F4024A4FD4D700E61B659247BB854",
        "poi": {
            "rating": 0,
            "poiTypes": [
                "ATM"
            ],
            "openingHours": {},
            "internationalPhone": ""
        },
        "viewport": {
            "southwest": {
                "lng": -0.11576103182719415,
                "lat": 51.498155166794405
            },
            "northeast": {
                "lng": -0.11167496817280585,
                "lat": 51.50069883320559
            }
        },
        "name": "Bank of Ireland - Post Office",
        "formatAddress": "125-131, Westminster Bridge Road, Lambeth, London, England, the United Kingdom",
        "address": {
            "subAdminArea": "London",
            "thoroughfare": "Westminster Bridge Road",
            "countryCode": "GB",
            "locality": "Lambeth",
            "country": "the United Kingdom",
            "adminArea": "England"
        },
        "distance": 206.06612089844526,
        "location": {
            "lng": -0.113718,
            "lat": 51.499427
        }
    }
]
}
사이트 세부 정보 검색
Place details search는 사이트의 고유 ID(사이트 ID)를 기반으로 사이트에 대한 검색 세부 정보를 반환합니다.SiteId는 키워드, 근처 또는 사이트 권장 검색에서 검색할 수 있습니다.
place details 검색의 요청 주체로 사용할 DetailSearchRequest 대상을 만듭니다.관련 매개변수는 다음과 같습니다. 여기서 siteId는 필수이고 다른 매개변수는 옵션입니다.
siteId: 한 곳의 ID입니다.
언어: 검색 결과를 표시하는 언어입니다.이 매개변수가 전달되지 않으면 로컬 언어가 사용됩니다.
그 다음에 detailSearch 함수를 호출하고 DetailSearchRequest 대상을 다음과 같은 매개 변수로 보낼 수 있습니다.
근처에서 검색한atm기의 상세한 정보를 보여 주세요.
const onDetailSearch = () => {
let detailSearchReq = {
    siteId: '7B4F4024A4FD4D700E61B659247BB854',
    language: 'en'
};
RNHMSSite.detailSearch(detailSearchReq)
    .then((response) => {
        console.log(JSON.stringify(response));
    })
    .catch((err) => {
        console.log(JSON.stringify(err));
    });
};
json의 응답은 이렇습니다. 보시다시피 처리할 수 있는 정보가 많습니다.
JAVA NIO - Perforemance 비교
Java Base 64, AES, SHA 1, MD5 암호 화 알고리즘

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage