react-native-google-places-autocomplete 不适用于 React native 0.61

Question

我在我的 react-native cli 项目中添加了带有 yarn 的 react-native-google-places-autocomplete，但它不起作用。以下是我目前面临的问题。

1. 地点下拉菜单未显示在 IOS 上，但输入文本字段允许我输入地点名称，但预测列表未出现

2. 在 IOS 和 android 上都没有触发 onPress 处理程序

3. 来自 react-native-google-places-autocomplete 的文本输入不允许我在 ANDROID 上输入任何内容。就像一直禁用（虽然焦点设置为true）

注意：所有 google location api 都已启用，google maps api、places api 和 geocode api 均已启用，并提供了有效的 api 密钥。

我尝试了所有可能的解决方案，包括以下：

1. 将 zIndex: 1000 设置为较高的值以避免它被隐藏在其他视图后面

2. 尝试创建新的 RN 应用程序并仅添加此组件以保持项目清洁

3. 重新生成 API，甚至使用与以前版本的 REACT NATIVE 一起使用的另一个 API。

日志在 Xcode 和 Android Studio 上均未显示任何内容。这是代码sn-p：

        <View style = {[{zIndex: 2, backgroundColor: 'white'}]}>
                <GooglePlacesAutocomplete
                    ref = {ref => setSearchTextRef(ref)}
                    placeholder='Search for gym'
                    styles={{
                        container: {backgroundColor: 'transparent'},
                        textInputContainer: styles.viewStyle,
                        textInput: styles.textInputStyle,
                    }}
                    keyboardShouldPersistTaps = {'handled'}
                    listUnderlayColor = {'transparent'}
                    textInputProps = {{
                        onFocus: () => focusInput(),
                        onBlur: () => blurInput(),
                        onChangeText: (text) => onChange(text)
                    }}
                    minLength={1} // minimum length of text to search
                    returnKeyType={'search'}
                    listViewDisplayed={'auto'}   // true/false/undefined
                    fetchDetails={true}
                    renderDescription={row => row.description} // custom description render
                    onPress={(data, details = null) => {
                        let coordinates = details.geometry.location;
                        sendCoordinates(coordinates, {data, details});
                    }}
                    getDefaultValue={() => ''}
                    query={{
                        key: googleAPIKey,
                        language: 'en', // language of the results
                        // types: '(cities)' // default: 'geocode'
                    }}
                    nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
                    GooglePlacesSearchQuery={{
                        rankby: 'distance',
                        types: 'gym'
                    }}
                    filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} 
                    debounce={200}
                />
            </View>

提前谢谢你

Answer 1

您的带有一些注释的代码对我有用。注释掉你的函数调用，因为那些没有提供。

      <View style = {[{zIndex: 2, backgroundColor: 'white'}]}>
          <GooglePlacesAutocomplete
              //ref = {ref => setSearchTextRef(ref)}
              placeholder='Search for gym'
              styles={{
                  container: {backgroundColor: 'transparent'},
                  //textInputContainer: styles.viewStyle,
                  //textInput: styles.textInputStyle,
              }}
              keyboardShouldPersistTaps = {'handled'}
              listUnderlayColor = {'transparent'}
              textInputProps = {{
                  //onFocus: () => focusInput(),
                  //onBlur: () => blurInput(),
                  //onChangeText: (text) => onChange(text)
              }}
              minLength={1} // minimum length of text to search
              returnKeyType={'search'}
              listViewDisplayed={'auto'}   // true/false/undefined
              fetchDetails={true}
              renderDescription={row => row.description} // custom description render
              onPress={(data, details = null) => {
                  let coordinates = details.geometry.location;
                  console.log(JSON.stringify(details)); //display details in console!
                  //sendCoordinates(coordinates, {data, details});
              }}
              getDefaultValue={() => ''}
              query={{
                key: 'YourKeyHere',
                language: 'en', // language of the results
                  // types: '(cities)' // default: 'geocode'
              }}
              nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
              GooglePlacesSearchQuery={{
                  rankby: 'distance',
                  types: 'gym'
              }}
              filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} 
              debounce={200}
          />
      </View>      

Answer 2

这个包不再维护，根本不工作。我在 IOS 上尝试了 expo。我什至没有得到结果列表。我发现了另一个像魅力一样工作的包：

https://www.npmjs.com/package/react-native-places-input