e
sv

Google Rehber otomatik tamamlama bileşenlerini React Native'de kullanma

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Google, biri Yerler API'si olan harita hizmetlerine erişmek için tonlarca API sunar. Places API, öncelikle HTTP isteklerini kullanan yerler hakkında size bilgi verir. Yerel bir adres, kasaba, şehir, semt, restoran veya herhangi bir yer hakkında, koordinatları da dahil olmak üzere, ihtiyacınız olan tüm bilgileri alabilirsiniz.

Yerler API'si, bir arama dizesiyle ilgili yerlerin listesini döndürme, bir yerin fotoğraflarını sağlama ve daha pek çok özellik gibi tonlarca özellik içerir. En sık ihtiyaç duyulan ve kullanılan özelliklerinden biri otomatik tamamlama hizmetidir.

Google, otomatik tamamlama hizmetini kullanarak, API aracılığıyla aranmakta olan bir yerin adresini veya adını otomatik olarak doldurabilir. Örneğin, kullanıcınız sipariş vermek istediği restoranın adını yazarken, yazdıklarına göre onlara önerilerde bulunabilirsiniz.

Bu yazımızda, React Native'de otomatik tamamlama hizmetini nasıl kullanabileceğimize bakacağız. Ancak, React react-native-google-places-autocomplete adlı bir React Native paketi bunu bizim için halledebileceğinden, Places API ile doğrudan çalışmak zorunda değiliz.

Şimdi, bir React Native projesinde react-native-google-places-autocomplete paketini nasıl kullanabileceğimize ve bazı temel işlevlerine ve projemize uyacak şekilde nasıl özelleştirebileceğimize bakalım. Şunları ele alacağız:

Google Rehber API'sini ayarlama

react-native-google-places-autocomplete paketi yalnızca Places API'ye erişmek için kullanılan bir araçtır. Önce Places API'yi kullanmak için bir Google Cloud projesi kurmadan çalışmayacaktır. Bunu dört adımda nasıl yapabileceğinizi göstereyim:

  1. Proje oluşturma
  2. Faturalandırmayı etkinleştirme
  3. Gerekli API'leri etkinleştirme
  4. API anahtarı oluşturma

Bir Google Cloud projesi oluşturarak başlayalım.

Google Cloud projesi oluşturma

Bir Google Cloud projesi olmadan hiçbir Google API hizmetini kullanamayız. Google Cloud Console'a gidin ve henüz yapmadıysanız kaydolun.

Hoş Geldiniz Mesajıyla Google Cloud Console Açılış Sayfası

Yukarıdaki resimde gösterilen sayfaya gideceksiniz. Daha önce proje oluşturmadıysanız “Create or Select Project” butonuna tıklayınız. Hemen bir modal açılır. Sağ üstteki “Yeni proje”ye tıklayın.

Projenin adını ve konumu girmenizi gerektiren yeni bir sayfa yüklenecektir – projenin hangi kuruluşa ait olması gerektiği anlamına gelen “konum”. Konumu “Kuruluş yok” olarak bırakıp projeniz için bir isim girebilirsiniz.

Son olarak, projeyi oluşturmak için “Oluştur”a tıklayın. Ardından projeyi seçebilir veya proje listenizi görmek için proje sayfasını ziyaret edebilirsiniz.

Google Rehber API için faturalandırmayı etkinleştirme

Google Rehber API'si sonsuza kadar ücretsiz değildir. Google, kullandıkça öde fiyatlandırma modeli kullanır. Ancak yaptığınız ilk birkaç istek her ay ücretsiz olacak.

Google, Places API'yi kullanmadan önce projeniz için faturalandırmayı etkinleştirmenizi zorunlu kılar.

Faturalandırma sayfasına gidin ve faturalandırmayı etkinleştirmek istediğiniz projeyi seçin. Bir modal açılır, henüz yapmadıysanız "Faturalandırma hesabı oluştur"u tıklamanız yeterlidir.

Bir faturalandırma hesabı oluşturmak için Google'ın bu resmi kılavuzunu izleyin.

Gerekli API'leri etkinleştirme

React react-native-google-places-autocomplete paketini kullanmak için yalnızca Places API ve Geocoding API'yi etkinleştirmeniz gerekir. Bunu sonra yapalım.

Aşağıdaki gibi görünmesi gerekenproje panonuza gidin :

Otuz Gün Görünümlü ve Veri Gösterilmeyen Google Cloud Console Proje Kontrol Paneli

Yukarıdaki resim gibi görünmüyorsa, kenar çubuğunda "API'leri ve Hizmetleri Etkinleştir"in seçili olduğundan emin olun. Ardından, gezinme çubuğundaki "API'leri ve Hizmetleri Etkinleştir"i tıklayın. Sizi API kitaplığı sayfasına götürecektir:

Hoş Geldiniz Mesajı ve Arama Çubuğu ile Google Cloud Console Api Kitaplığı Sayfası

"Places API"yi arayın ve sonucu tıklayın. Sonraki sayfa, fiyatlandırma bilgileri ve projeniz için API'yi etkinleştirmek için bir düğme dahil olmak üzere Yerler API'si hakkında bilgiler içerir. "Etkinleştir" düğmesini tıklayın, o kadar.

Projeniz için faturalandırmayı etkinleştirmediyseniz, Places API'yi etkinleştirmeye çalıştığınızda bunu yapmanız istenecektir.

Ardından, API kitaplığı sayfasına geri dönün ve Geocoding API'yi de etkinleştirin.

API anahtarı oluşturma

Bu, paketi kullanmadan önce atmamız gereken son adımdır.API'ler kontrol panelinize gidin. Sol kenar çubuğunda, “Kimlik Bilgileri” seçeneğini seçin.

Oauth Onay Ekranını Yapılandırmak İçin Sol Kenar Çubuğu Menüsünden Seçilmiş Kimlik Bilgileri ve Hatırlatma Mesajı ile Google Cloud Console Apis ve Hizmetler Kontrol Paneli

Üst gezinme çubuğundaki "Kimlik Bilgileri Oluştur"u tıklayın ve "API anahtarı"nı seçin. Bu, projeniz için bir API anahtarı oluşturacaktır. Bu API anahtarı ile yalnızca etkinleştirdiğiniz API'lere erişebilirsiniz. API anahtarını kopyalayın ve güvenli bir yerde saklayın.

API anahtarınızın yanında bir uyarı simgesi görebilirsiniz. Buna dikkat etmeniz önemlidir. Google , API anahtarlarınızı yalnızca uygulamalarınızla kısıtlamanızı önerir. Aksi takdirde, API anahtarınızı gizli tutmayı başaramazsanız, API anahtarı diğer uygulamalar veya web siteleri için işe yaramaz olacaktır.

Bu çoğunlukla üretim amaçları için kullanışlıdır. Yalnızca react-native-google-places-autocomplete paketinin özelliklerini test edeceğimiz için, anahtarı kısıtlamaya gerek yoktur.

react-native-google-places-autocomplete kullanma

react-native-google-places-autocomplete npm paketi, Google Rehber otomatik tamamlama hizmetlerini kullanmak için özelleştirilebilir bir bileşen sağlar.

Ayrıca, kullanıcı incelemeleri ve koordinatları da dahil olmak üzere aranan bir yer hakkında daha fazla ayrıntı sağlamak için Yer Ayrıntıları hizmetlerini ve okunabilir adresleri geometrik koordinatlara dönüştürmek için Geocoding API'yi ve bunun tersini de kullanır.

Bu makaleyi takip etmek ve bu paketi iş başında görmek için bir React Native projesi oluşturun.

Bir React Native projesi oluşturma

Örnek React Native projemiz için, yemek yiyenlerin yemek yiyebilecekleri yerler araması için bir uygulama oluşturacağız. Bu makalenin ana odak noktası, react-native-google-places-autocomplete paketinin nasıl kullanılacağına ilişkin bazı örnekler göstermek olduğundan, uygulamayı oluşturmanın her adımını gerçekleştirmeyeceğiz.

Terminalinize gidin ve aşağıdakileri çalıştırın:

 npx tepki-yerel init Foodies

Bir TypeError: cli.init is not a function , hem global react-native-cli hem de react-native -native öğelerini kaldırın. Şimdi yalnızca global react-native yeniden yükleyin.

Şimdi bağımlılıkları yükleyelim. Şimdilik yalnızca bir bağımlılığa ihtiyacımız var: react-native-google-places-autocomplete paketi.

 npm install tepki-yerel-google-yerler-otomatik tamamlama

Paket, uygulamamızda Places API'yi kullanmak ve özelleştirmek için ihtiyacımız olan her şeyi içeren bir bileşen sağlar. Temel bir örnek görelim:

 {GooglePlacesAutocomplete} öğesini 'react-native-google-places-autocomplete' öğesinden içe aktarın;
{apiKey} dosyasını './config' dosyasından içe aktarın; // google bulut API anahtarınız

const Uygulama = () => {
  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        sorgu={{anahtar: apiKey}}
      />
    </SafeAreaView>
  );
};

Yukarıdaki örneğin bazı önemli kısımlarını gözden geçirelim.

GooglePlacesAutocomplete , kullanıcıların bir yerin adını yazdığı metin giriş formudur. Kullanıcı yazarken, kullanıcının yazdıklarına dayalı olarak bir önerilen yer modeli açılır menü olarak görünecektir.

Sorgu pervanesi, gerekli olan tek pervanedir; anahtar özelliği olmadan, otomatik tamamlama paketi Places API'sini kullanamaz. API anahtarınızı içe aktarmanız ve burada kullanmanız gerekir. Ayrıca, Yerler ve Coğrafi Kodlama API'lerini kullanmak için Bulut projenizde faturalandırmayı etkinleştirmeyi unutmayın.

Hassas bilgileri React Native projeniz içinde depolamak güvenli bir uygulama değildir. API anahtarınızı nasıl güvence altına alabileceğinizi tartışalım.

API anahtarınızın güvenliğini sağlama

API anahtarınızı React Native projeniz içinde saklamamanız çok önemlidir. Uygulama paketinize sahip herkes API anahtarınıza erişebilir, dolayısıyla bu güvenli bir depolama yöntemi değildir.

API anahtarınızı saklamak için bir sunucu kullanarak bunu çözebilirsiniz. Öyle ki, uygulama kullanıcı tarafından açıldığında, sunucunuza API anahtarını getirmesi için bir istekte bulunmanız yeterlidir.

API anahtarının sunucuda güvenliğini sağlamak için de önlemler vardır. Brad Traversy'nin API anahtarlarının güvenliğini sağlamaya ilişkin videosu, bunun nasıl yapılacağını gösterir.

Google Rehber API'sinden gelen yanıtları işleme

Google Rehber API'sinden gelen ilk yanıt grubu, otomatik tamamlama önerileridir. react-native-google-places-autocomplete paketi bu yanıt grubunu yönetir, bu nedenle onlar için endişelenmemize gerek yoktur.

Ancak, kullanıcı olayları tarafından tetiklenecek başka yanıtlar da vardır. Örneğin, önerilen bir adrese basıldığında, kullanıcının girişi daha fazla öneri döndürmez (yani yer bulunamadı). Bu yanıtlar tarafımızca ele alınmalıdır.

Yine, otomatik tamamlama paketi, bu yanıtları işlemek için olay destekleri sağlayarak bizim için zor kısmı yaptı. Bir örneğe bakalım:

 const Uygulama = () => {
  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        sorgu={{anahtar: apiKey}}
        fetchDetails={true}
        onPress={(veri, ayrıntılar = boş) => console.log(veri, ayrıntılar)}
        onFail={hata => console.log(hata)}
        onNotFound={() => console.log('sonuç yok')}
      />
    </SafeAreaView>
  );
};

Tanıtılan bu yeni aksesuarlar – onPress , onFail ve onNotFound – hayati önem taşıyor. Places API'si için bunun gibi bir paket kullanırken, aşağıdaki gibi soruları yanıtlamak için bu aksesuarları kullanabilirsiniz:

  • Bir kullanıcı bir öneriye dokunduğunda ne olur?
  • Bir arama dizesi için sonuç olmadığında ne olur?
  • API'den veri alma başarısız olduğunda ne olur?

Otomatik tamamlama paketi, bu soruları aksesuarlarla yanıtlamanın yollarını sunar. Yanıtları özel işlevlerle işlemek bize kalmış. Pekala, bu soruları birbiri ardına ele alalım.

Bir kullanıcı bir öneriye dokunduğunda ne olur?

Kullanıcı bir öneriye dokunduğunda, seçilen yerle ilgili bilgiler, işleve geçirilen bir parametre olarak döndürülür ve daha sonra onPress aktarılır. Yukarıdaki örnekteki iki parametre – data ve details – yerle ilgili bilgileri oluşturur.

data parametresi, açıklama veya adres adı, ülke, şehir ve diğer ayrıntılar gibi yer hakkında temel bilgilerin bir nesnesini döndürür.

fetchDetails prop false ise, details parametresi veri nesnesiyle aynı nesneyi döndürür.

fetchDetails prop, varsayılan olarak false olarak ayarlanır, ancak true olarak ayarlandığında, details parametresi, geometri dahil yer hakkında daha ayrıntılı bilgi verir. Google, belgelerinde eksiksiz bir Yer Ayrıntıları yanıtı örneği sağlar.

Bir arama dizesi için sonuç olmadığında ne olur?

Bir kullanıcının bazen bir arama dizesi yazıp hiçbir sonuç almaması oldukça olasıdır. onNotFound prop ile, tüm projede hiçbir sonuç olmadığı konusunda farkındalık yaratabiliriz. Ardından, uygulamanızın içinde, bu yanıta göre nasıl görüntülenmesi gerektiğini veya ne olması veya olmaması gerektiğini halledebilirsiniz.

Örneğin, diğer tüm özellikleri devre dışı bırakabilir (yemek siparişi için bir sonraki adıma geçmek gibi) ve sonuç olmadığını belirten özel bir mesaj görüntüleyebiliriz.

Alternatif olarak, yalnızca kullanıcıyı uyarmak ve uygulamanızda başka bir yerde sonuçların olmaması konusunda özel bir şey yapmak istemiyorsanız, hiçbir sonuç bulunmadığında kullanıcıları uyarmak için FlatList listEmptyComponent kullanabilirsiniz.

Bunu, aşağıdaki gibi bir bileşen veya öğe ileterek yapabilirsiniz:

 const Uygulama = () => {
  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        onPress={(veri, ayrıntılar = boş) => console.log(veri, ayrıntılar)}
        sorgu={{anahtar: apiKey}}
        fetchDetails={true}
        onFail={hata => console.log(hata)}
        onNotFound={() => console.log('sonuç yok')}
        listEmptyComponent={() => (
          <Görünüm stili={{esnek: 1}}>
            <Text>Sonuç bulunamadı</Text>
          </Görüntüle>
        )}
      />
    </SafeAreaView>
  );
};

Yukarıdaki kodun bir sonucu olarak, kullanıcı sonuç olmayan bir şey yazarsa, arama çubuğunun altında “Sonuç bulunamadı” metni görüntülenir.

İmleçle Gösterilen Foodie Uygulaması Ön Ucu Arama Çubuğuna Bilinmeyen Bir Yer Yazarak Gösterilen Ve Hiçbir Sonuç Bulunamadı diyen Mesaj Görüntülendi

API'den veri alma başarısız olduğunda ne olur?

Ayrıca, Places API'den veri alınmasının bazen bir hataya yol açması da oldukça olasıdır. Örneğin, Google Cloud projenizle veya fatura adresinizle ilgili bir yapılandırma sorunu olduğundan Places API kendi hatasını verebilir.

Yerler API'sini veya Geocoding API'sini kullanırken, API'den bir hata olduğunda onFail bir hata döndürür.

Burada karşılaşabileceğiniz çok yaygın bir sorun, projenizde faturalandırmanın etkinleştirilmemesi veya gerekli faturalandırmaların yapılmasıyla ilgili başka bir sorundur.

Önceden tanımlanmış yerler ile arama

Kullanıcılarınızın favori veya en çok ziyaret ettiği yerleri, GooglePlacesAutocomplete bileşeni için önceden tanımlanmış yerler olarak kullanabilirsiniz.

Önceden tanımlanmış bir yer, yer hakkında bilgi içeren bir adres içerir. Kullanıcıya istediğiniz adresi veya herhangi bir adı göstermeyi seçebilirsiniz.

Önceden tanımlanmış yerler kullanırsanız, kullanıcı bir adresi aramak için metin girişine odaklandığında, otomatik tamamlama önerileri olarak önceden tanımlanmış seçenekler açılır.

İki konumun – Dominos Pizza ve Chicken Republic – önceden tanımlanmış favorite yer türleri olarak nasıl ayarlanacağı aşağıda açıklanmıştır:

 const Uygulama = () => {
  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        onPress={(veri, ayrıntılar = boş) => console.log(veri, ayrıntılar)}
        sorgu={{anahtar: apiKey}}
        fetchDetails={true}
        onFail={hata => console.log(hata)}
        onNotFound={() => console.log('sonuç yok')}
        önceden tanımlanmışYerler={[
          {
            tür: 'favori',
            tanım: 'Dominos Pizza',
            geometri: {konum: {enlem: 48.8152937, lng: 2.4597668}},
          },
          {
            tür: 'favori',
            tanım: 'Tavuk Cumhuriyeti',
            geometri: {konum: {lat: 48.8496818, lng: 2.2940881}},
          },
        ]}
      />
    </SafeAreaView>
  );
};

Yukarıdaki kodda açıklama kullanıcıya gösterilecek isimdir. Herhangi bir ön tanımlı seçenek seçildiğinde, yer için oluşturduğunuz nesne, o yerin data ve details parametreleriyle birlikte döndürülecektir.

Nesne sadece tip, açıklama ve geometri ile sınırlı değildir. Yer hakkında daha fazla bilgi ekleyebilirsiniz.

Yukarıdaki kodun bir sonucu olarak, daha kullanıcı yazmaya başlamadan önce bu favorite ön tanımlı yerlerin öneri olarak göründüğünü görmelisiniz. Aşağıdaki sonuca bakın:

İki Kaydedilen Yerin (Dominos Pizza ve Chicken Republic) Hemen Göründüğü ve İmleç Dominos Pizza Üzerine Tıklandığında, İmleç Arama Çubuğuna Tıklandığında Görüntülenen Foodie Uygulaması Ön Ucu

Özel bir metin girişi bileşeni kullanma

Varsayılan olarak, react-native-google-places-autocomplete paketi, metin girişi için React TextInput bileşenini kullanır. Ancak, paketin seçimine takılıp kalmadınız

textInputProps prop ile, Input from React Native Elements gibi istediğiniz herhangi bir özel bileşeni kullanabilirsiniz.

 {GooglePlacesAutocomplete} öğesini 'react-native-google-places-autocomplete' öğesinden içe aktarın;
{apiKey} dosyasını './config' dosyasından içe aktarın; // google bulut API anahtarınız
{Girdi}'yi '@rneui/themed'den içe aktarın;

const Uygulama = () => {
  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        onPress={(veri, ayrıntılar = boş) => console.log(veri, ayrıntılar)}
        sorgu={{anahtar: apiKey}}
        fetchDetails={true}
        onFail={hata => console.log(hata)}
        onNotFound={() => console.log('sonuç yok')}
        textInputProps={{
          InputComp: Giriş,
        }}
      />
    </SafeAreaView>
  );
};

textInputProps , metin girişi bileşeninin tüm desteklerinin bir nesnesidir. Dolayısıyla, React TextInput kullanıyorsanız, burada ona özel sahne öğelerini kullanabilirsiniz. Örneğin:

 const Uygulama = () => {
  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        onPress={(veri, ayrıntılar = boş) => console.log(veri, ayrıntılar)}
        sorgu={{anahtar: apiKey}}
        fetchDetails={true}
        onFail={hata => console.log(hata)}
        onNotFound={() => console.log('sonuç yok')}
        textInputProps={{
          otomatik odaklama: doğru,
          blurOnSubmit: yanlış,
        }}
      />
    </SafeAreaView>
  );
};;

Yukarıda textInputProps içinde kullanılan aksesuarlar, React Native'in TextInput özelliğine özeldir. Üçüncü taraf kitaplığı kullandığınızda da aynı şey olur.

GooglePlacesAutocomplete bileşeninizin stilini belirleme

GooglePlacesAutocomplete bileşeninin varsayılan stilleri iyi tasarlanmıştır, bu nedenle uygulamanız için yeterli olabilir.

Yine de, uygulamanıza uymalarını sağlamak için varsayılan stilleri ekleyebilirsiniz. Ayrıca varsayılan stillerden tamamen kurtulabilir ve stili sıfırdan tamamen özelleştirebilirsiniz.

GooglePlacesAutocomplete bileşeni, metin girişinden açılır listeye kadar tüm bileşenleri şekillendirmek için bir stil desteğine sahiptir. Eylemde görelim:

 const Uygulama = () => {
  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        onPress={(veri, ayrıntılar = boş) => console.log(veri, ayrıntılar)}
        sorgu={{anahtar: apiKey}}
        fetchDetails={true}
        onFail={hata => console.log(hata)}
        onNotFound={() => console.log('sonuç yok')}
        stiller={{
          kapsayıcı: {
            esnek: 0,
          },
          tanım: {
            renk: '#000',
            yazı tipiBoyutu: 16,
          },
          önceden tanımlanmışYerlerAçıklama: {
            renk: '#3caf50',
          },
        }}
      />
    </SafeAreaView>
  );
};

Styles prop, React Native'in standart styles özelliklerini ve değerlerini kullanan bir nesnedir. styles desteğiyle, GooglePlacesAutocomplete bileşenini oluşturan farklı bölümlerin stilini belirleyebilirsiniz.

Metin girişi, açılır kapsayıcı, her açılır öğe ve diğerleri gibi bu bölümler, GooglePlacesAutocomplete bileşeninin alt öğeleridir. Örneğin, metin girişinin stili şu şekilde yapılır:

 stiller={
  metinGirdi: {
   borderColor: 'turuncu',
   yazı tipiBoyutu: 20
 }
}

Her bölümü veya özelliği, türüne göre denemeli ve biçimlendirmelisiniz. Örneğin, bileşenin kapsayıcısı bir Görünüm bileşenidir, bu nedenle Görünüm bileşeni olarak biçimlendirilmelidir. İşte tüm bölümlerin/özelliklerin ve bunların eleman tiplerinin bir listesi

Sonuçları bir ülkeyle sınırlamak

react-native-google-places-autocomplete önerilerinde gösterilen arama sonuçlarını bir ülkeyle sınırlamak mümkündür. Bu nedenle, yalnızca belirli bir ülkede kullanıcının arama dizesiyle eşleşen yerler açılır.

Aşağıdaki gibi bir ülke belirtmek için prop sorgusundaki component özelliğini kullanın:

 sorgu={{anahtar: apiKey, bileşenler: 'ülke:biz'}}

country:us değeri basitçe Amerika Birleşik Devletleri anlamına gelir. Tam adından ziyade kullanılan ülke adının kısaltmasıdır. Desteklenen ülkelerin listesi aşağıdadır .

Sorgu pervanesi ile sonuçları farklı bir dilde de sağlayabilirsiniz. Varsayılan dil İngilizce'dir, ancak dil özelliği ile ISO 639-1 kodunda farklı bir dil belirtebilirsiniz.

 sorgu={{anahtar: apiKey, bileşenler: 'ülke:biz', dil: 'it'}}

Yukarıdaki kodda language özelliğini it ayarladık. Bu, İtalyanca sonuçlar sağlayacaktır. Arama sonuçlarınızı diğer dillerde sağlamak istiyorsanız , desteklenen dillerin listesine ve kodlarına göz atın.

Şimdi, kullanıcı aramaya başlarsa, arama sonuçları İtalyanca olarak görünecek ve yalnızca Amerika Birleşik Devletleri içindeki seçenekleri gösterecektir.

Foodie Uygulaması Ön Uç, Arama Çubuğunda Kısmen Yazılmış Arama İfadesi San ve Amerika Birleşik Devletleri'nde Bulunan İtalyanca Olarak Gösterilen Açılır Sonuçlar

Giriş değeri getiriliyor

react-native-google-places-autocomplete paketi tarafından sağlanan yöntemlerden biri getAddressText . Bu yöntem, kullanıcının metin girişinin değerini döndürür.

Bu yöntemin birçok kullanım durumu vardır. Örnekler arasında, bilinmeyen bir yer arandığında kullanıcının girdisini özel bir şekilde görüntüleme veya arama sırasında bir hata oluşursa kullanıcının son girdisini yeniden kullanma sayılabilir.

Paket tarafından sağlanan herhangi bir yöntemi kullanmak için, öncelikle aşağıdaki gibi React refs kullanarak GooglePlacesAutocomplete bileşenine bir başvuru yapmalıyız:

 const Uygulama = () => {
  const placeRef = useRef();

  const getAddress = () => {
    konsol.log(placesRef.current?.getAddressText());
  };

  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        onPress={(veri, ayrıntılar = boş) => console.log(veri, ayrıntılar)}
        sorgu={{anahtar: apiKey}}
        fetchDetails={true}
        onFail={hata => console.log(hata)}
        onNotFound={() => console.log('sonuç yok')}
        referans={yerRef}
      />
    </SafeAreaView>
  );
};

Ayrıca yararlı olabilecek diğer yöntemler şunlardır:

  • setAddressText : metin girişinin değerini değiştirir
  • clear : metin girişini temizler
  • isFocused : metin girişi odaklanmışsa true, değilse false döndürür.
  • getCurrentLocation : mevcut konuma göre yakındaki yerleri bulmak için bir sorgu yapar.

Şimdi getCurrentLocation nasıl kullanılacağını keşfedelim.

Geçerli konum getiriliyor

getCurrentLocation yöntemi, kullanıcının mevcut konumuna göre yakındaki yerleri bulmak için bir sorgu yapar. Ancak, bu paketin sağladığı tek konum işlevi bu değildir; ayrıca, bir yer hakkında bilgi aldığı gibi, kullanıcının o anki konumunu da alabilir.

Paket, kullanıcının konumunu bulmak için coğrafi konum hizmetlerini kullanır ve bunu otomatik tamamlama önerilerinin bir parçası olarak dahil eder. Seçildiğinde, kullanıcının mevcut konumuyla ilgili ayrıntılar döndürülür.

Bunun olması için currentLocation true olarak ayarlamamız gerekir:

 const Uygulama = () => {
  dönüş (
    <Güvenli Alan Görünümü>
      <GooglePlacesOtomatik Tamamlama
        placeholder="Bir yer yazın"
        onPress={(veri, ayrıntılar = boş) => console.log(veri, ayrıntılar)}
        sorgu={{anahtar: apiKey}}
        fetchDetails={true}
        onFail={hata => console.log(hata)}
        onNotFound={() => console.log('sonuç yok')}
        currentLocation={true}
        currentLocationLabel="Konumunuz!" // basit bir etiket ekle
      />
    </SafeAreaView>
  );
};

Tam olarak işleyen bir uygulama için ayarlamanız gereken tek şey bu değil. Ayrıca react-native-geolocation-service gibi bir coğrafi konum servis sağlayıcısı kurmanız gerekir.

Ayrıca, react-native-google-places-autocomplete ile herhangi bir konum hizmetini kullanmak için kullanıcılarınızdan konum izni vermelerini istemeniz gerekir. Ancak, bu belirli adımlar, özellikle react-native-google-places-autocomplete paketine odaklanan bu makalenin kapsamının ötesine geçer.

Çözüm

Bu yazıda, react-native-google-places-autocomplete paketi için bir Google bulut projesinin nasıl kurulacağına baktık. Ayrıca paketin donanımları ve yöntemleri aracılığıyla bir ton işlevselliğe baktık.

Örneğin, yanıtları işlemeyi, API anahtarınızı güvenceye almayı, GooglePlacesAutocomplete bileşenini biçimlendirmeyi, sonuçları bir ülkeyle sınırlandırmayı, sonuçları farklı bir dilde göstermeyi, getAddressText gibi yöntemleri kullanmayı, özel bir metin girişi bileşeni kullanma ve daha fazlasını inceledik.

Şimdi, paket burada listelediklerimizle sınırlı değil. Paketi, uygulamanızda Google Rehber API'sinin nasıl kullanılmasını istediğinize uyacak şekilde özelleştirmeye yardımcı olacak daha fazla destek ve yöntem bulabilirsiniz.

Umarım çok eğlenmişsindir. Yorum bölümünde ne düşündüğünüzü bana bildirin. Okuduğunuz için teşekkürler ve iyi hackler.

Google Rehber otomatik tamamlama bileşenlerini React Native'de kullanma yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Google Rehber otomatik tamamlama bileşenlerini React Native'de kullanma