Автозаполнение Google с React Native

Последнее, что я скажу по этому поводу — это то, что когда вы генерируете свой ключ API, убедитесь, что он ограничен — на случай, если кто-то, кто не должен его видеть, увидит его.

Сгенерируйте ключ здесь:

После создания ключа. щелкните значок «Редактировать карандаш», чтобы ограничить ключ.

Теперь, когда у вас есть платная учетная запись Google, ограниченный ключ и вы активировали API, с которыми хотите работать, мы можем увидеть, как реализовать это в коде.

Первое, что вам нужно, это иметь возможность получить местоположение со смартфона, на котором работает ваше приложение. для этого вы будете использовать этот пакет npm:

Теперь мы можем начать использовать Google Places API.

В этом примере вы будете использовать хуки React Native. Первое, что вы закодируете в компоненте, который будет контролировать и управлять автозаполнением, — это создать хук useState для данных о местоположении и useEffect для вызова нашего установленного пакета geolocation при монтировании компонента.

const [geoLocation, setGeoLocation] = useState(‘’);
….
useEffect(() => {
Geolocation.getCurrentPosition((position, err) => {
if (err) {
     setGeoLocation({latitude: null, longitude: null});
} else {
     const location = {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
     };
     setGeoLocation(location);
  }
});
}, []);

Автозаполнение — это не более чем простой компонент input. (<Form> и <Item> — это компоненты из библиотеки пользовательского интерфейса native-base для React Native. Здесь по-прежнему нет никакой магии:

const [autoAddress, setAutoAddress] = useState([]);
const [chosenAddress, setChosenAddress] = useState(‘’);
<Form>
   <Item stackedLabel style={addressFieldsStyles.item}>
    <Label>Adress</Label>
     <Input
       placeholder=”dizengoff 236, Tel-Aviv”
       onChangeText={onGoogleAutocomplete}
       value={chosenAddress}
       style={addressFieldsStyles.item}
     />
   {autoAddress.length > 0 && getAutoCompleteList()}
 </Item>
…
</Form>

Функция onChange, которую вы вызываете во входных данных, установит новый state (поэтому компонент input будет обновляться в режиме реального времени) и вызовет функцию debounce, чтобы сделать запрос на выборку (вы используете debounce, чтобы не делать запрос fetch). для каждой буквы, которую набирает пользователь).

const onGoogleAutocomplete = data => {
                 setChosenAddress(data);
                 debouncedPlacesFetch(data);
         };

Обратите внимание, что вы также используете метод lodash debounce и хук React Native useCallback. Причина в том, что метод debounce будет вызываться только один раз (обратите внимание, что это делается внутри компонента, но вне значения returned)

Какие параметры содержит URL-адрес извлечения:

• ключ : ключ, который вы получили при создании учетных данных.
• input : буквы, введенные пользователем в поле ввода.
• местоположение: местонахождение пользователя при отправке запроса на выборку. (это поможет вам получить суженный ответ от Google)
• радиус: это не обязательно, но насколько я понимаю, это улучшит результаты, и всегда должно быть установлено на 2000 (метров)

const debouncedPlacesFetch = useCallback(
_.debounce(
locationTypedByUser => {
console.log(‘fetching data from google’);
const url = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AI********Cc&input=${locationTypedByUser}&location=${geoLocation.latitude},${geoLocation.longitude}&radius=2000`;
fetch(url)
    .then(data => {
        return data.json();
     })
    .then(data => {
        const autoComRes = _.map(data.predictions, item => item.description);
       setAutoAddress(autoComRes);
    })
     .catch(e => console.log(e));
  },300,{trailing: true, leading: false},
),[]);

Вы будете использовать состояние setAutoAddress для хранения данных для выпадающего меню, которое вы создадите через мгновение.

Обратите внимание, что в этом примере вы используете ключ API в коде. НИКОГДА не размещайте его в своем коде или в переменной env, так как эти данные могут быть найдены не теми людьми в вашем исходном коде (вы не можете скрыть это таким образом). Вместо этого используйте сервер или лямбда-функцию AWS для выполнения выборки в Google Places API.

Создание меню dropDown:

const getAutoCompleteList = () => {
    return (
       <ScrollView style={addressFieldsStyles.autoComcontainer}>
          {_.map(autoAddress, (item, index) => {
               return (
                    <TouchableHighlight 
                    key={index}
                    onPress={e => { 
                         setChosenAddress(item);
                         setAutoAddress([]);
                         }}>
                     <View 
                      style={addressFieldsStyles.autoComItem} 
                      key={index}>
                       <Text 
                         style={addressFieldsStyles.autoComText}>
                            {item}
                       </Text>
                      </View>
                    </TouchableHighlight>
                    );
             })}
        </ScrollView>
);};

Используйте scrollView вместо flateList, чтобы избежать предупреждения React Native, если ваше автозаполнение является дочерним элементом компонента с тегом flateList like в нем.

Это. Теперь вы можете начать использовать API автозаполнения мест Google.