Google Place Picker: Thêm Google Place Picker vào Ứng dụng React Native của Bạn

react-native-google-place-picker

Bao bọc React Native của Google Place Picker cho iOS + Android.

iOS	Android

Cài đặt

npm install react-native-google-place-picker --save

Sau đó, bạn phải cài đặt các phụ thuộc native. Bạn có thể sử dụng rnpm (hiện đã là một phần của react-native core) để tự động thêm các phụ thuộc native:

react-native link

hoặc liên kết thủ công như sau:

iOS

Trong XCode, trong bảng điều hướng dự án, nhấp chuột phải vào Libraries ➜ Add Files to [tên dự án của bạn]

Đi đến node_modules ➜ react-native-google-place-picker và thêm RNGooglePlacePicker.xcodeproj

Trong XCode, trong bảng điều hướng dự án, chọn dự án của bạn. Thêm libRNGooglePlacePicker.a vào Build Phases của dự án của bạn ➜ Link Binary With Libraries

Bên trong thư mục ios của bạn, thêm một tệp có tên là Podfile với nội dung sau content

Chạy pod install --project-directory=ios trong thư mục gốc của dự án.

Ở đầu tệp AppDelegate.m của bạn:

#import <GoogleMaps/GoogleMaps.h>
#import <GooglePlaces/GooglePlaces.h>

Sau đó, trong việc triển khai AppDelegate của bạn, thêm vào trong application:didFinishLaunchingWithOptions, thay thế YOUR_API_KEY:

NSString *kAPIKey = @"YOUR_API_KEY";
[GMSPlacesClient provideAPIKey:kAPIKey];
[GMSServices provideAPIKey:kAPIKey];

Chạy react-native run-ios

Android

. Mở tệp android/app/src/main/java/[...]/MainActivity.java

• Thêm import com.reactlibrary.RNGooglePlacePickerPackage; vào phần import ở đầu tệp
• Thêm new RNGooglePlacePickerPackage() vào danh sách được trả về bởi phương thức getPackages()

. Thêm các dòng sau vào tệp android/settings.gradle:

include ':react-native-google-place-picker'
project(':react-native-google-place-picker').projectDir = new File(rootProject.projectDir,  '../node_modules/react-native-google-place-picker/android')

. Chèn các dòng sau vào khối dependencies trong android/app/build.gradle:

compile project(':react-native-google-place-picker')

. Thêm quyền và YOUR_API_KEY vào tệp manifest của bạn:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example"
    android:versionCode="1"
    android:versionName="1.0">

    ...

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    ...

    <application>

      ...

      <meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="YOUR_API_KEY" />

      ...

    </application>
</manifest>

Sử dụng

import RNGooglePlacePicker from 'react-native-google-place-picker';

RNGooglePlacePicker.show((response) => {
  if (response.didCancel) {
    console.log('User cancelled GooglePlacePicker');
  }
  else if (response.error) {
    console.log('GooglePlacePicker Error: ', response.error);
  }
  else {
    this.setState({
      location: response
    });
  }
})

Ví dụ

• Một ví dụ hoạt động hoàn chỉnh example

Đối tượng Phản hồi

Tín dụng

Cảm ơn sự cảm hứng và sự giúp đỡ từ các kho lưu trữ sau:

• react-native-create-library
• react-native-image-picker
• react-native-maps
• react-native-lock

Giấy phép

Mã trong kho lưu trữ git này được cấp phép MIT.

Chi tiết tải về:

Tác giả: zhangtaii
Nguồn: https://github.com/zhangtaii/react-native-google-place-picker

Giấy phép: MIT license