React Native Google Places Autocomplete多字段拆分与手动搜索实现问询

需求a：拆分搜索为城市/街道多字段 #

自己搭建独立的城市、街道输入框，通过组合字段内容驱动Autocomplete组件的搜索，还能配合API参数缩小搜索范围：

• 用TextInput分别实现城市和街道输入框，监听两者的文本变化事件。
• 将城市与街道拼接成完整的搜索字符串（比如${street}, ${city}），通过组件的ref调用setQuery方法，把组合后的字符串传给Autocomplete组件，触发搜索建议。
• 进阶优化：如果能获取到城市的经纬度，可以在组件的query参数里设置location和radius，让街道搜索只返回该城市范围内的结果，提升精准度。

示例代码：

import React, { useState, useRef } from 'react';
import { TextInput, View, StyleSheet } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const LocationForm = () => {
  const [city, setCity] = useState('');
  const [street, setStreet] = useState('');
  const autocompleteRef = useRef(null);

  const updateSearchQuery = () => {
    const combinedQuery = `${street}, ${city}`.trim();
    autocompleteRef.current?.setQuery(combinedQuery);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="输入城市"
        value={city}
        onChangeText={(text) => {
          setCity(text);
          updateSearchQuery();
        }}
      />
      <TextInput
        style={styles.input}
        placeholder="输入街道"
        value={street}
        onChangeText={(text) => {
          setStreet(text);
          updateSearchQuery();
        }}
      />
      <GooglePlacesAutocomplete
        ref={autocompleteRef}
        query={{
          key: '你的Google API密钥',
          language: 'zh-CN',
          // 可选：如果有城市经纬度，添加以下参数缩小搜索范围
          // location: '39.9042,116.4074', // 北京经纬度示例
          // radius: 50000,
        }}
        onPress={(data, details) => {
          // 处理选中的地址结果
          console.log('选中地址:', data.description);
        }}
        styles={{
          textInput: styles.autocompleteInput,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 16 },
  input: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingHorizontal: 8,
    marginBottom: 8,
  },
  autocompleteInput: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingHorizontal: 8,
  },
});

export default LocationForm;

需求b：传入对象触发搜索并自动选中第一个结果 #

通过组件的ref控制搜索流程，在搜索结果加载完成后自动选中第一条：

• 先把用户输入的对象（比如{city: 'xxx', street: 'xxx'}）拼接成搜索字符串，调用组件的search方法发起搜索。
• 在onLoad回调中获取返回的结果列表，若存在结果，直接执行选中逻辑（可以把原本在onPress里的处理逻辑抽成独立函数，直接传入第一条结果的数据）。

示例代码：

import React, { useState, useRef } from 'react';
import { Button, View, StyleSheet } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const AutoSelectLocation = () => {
  const [userInput, setUserInput] = useState({ city: '上海', street: '南京东路' });
  const autocompleteRef = useRef(null);

  // 抽离选中结果的处理逻辑
  const handleSelectLocation = (data, details) => {
    console.log('选中地址:', data.description);
    // 这里添加你的业务逻辑，比如更新表单状态、提交数据等
  };

  const triggerAutoSearch = () => {
    const searchQuery = `${userInput.street}, ${userInput.city}`.trim();
    autocompleteRef.current?.search(searchQuery);
  };

  return (
    <View style={styles.container}>
      <Button title="自动搜索并选择" onPress={triggerAutoSearch} />
      <GooglePlacesAutocomplete
        ref={autocompleteRef}
        query={{
          key: '你的Google API密钥',
          language: 'zh-CN',
        }}
        onLoad={(results) => {
          // 结果加载完成后，自动选中第一条
          if (results.length > 0) {
            handleSelectLocation(results[0], null);
            // 可选：如果需要隐藏搜索建议列表，可以调用组件的close方法
            autocompleteRef.current?.close();
          }
        }}
        onPress={handleSelectLocation}
        styles={{
          textInput: styles.autocompleteInput,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 16 },
  autocompleteInput: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingHorizontal: 8,
    marginTop: 8,
  },
});

export default AutoSelectLocation;

注意：避免直接调用组件的私有方法（比如_handlePress），这类方法可能随组件版本更新而变化，用抽离的公共处理函数更稳定。

内容的提问来源于stack exchange，提问作者Pedro Henrique Ferreira