ios react原生谷歌位置自动完成在React原生0.61上不起作用

np8igboo  于 2023-01-22  发布在  iOS
关注(0)|答案(4)|浏览(114)

我在我的react-native cli项目中添加了react-native-google-places-autocomplete with yarn,但是它不起作用。以下是我目前面临的问题。
1.地点下拉列表未显示在IOS上,但是输入文本字段允许我输入地点名称,但预测列表未显示

  1. onPress处理程序在IOS和Android上根本不会触发
    1.来自react-native-google-places-autocomplete的文本输入不允许我在ANDROID上输入任何内容。它就像一直被禁用(尽管焦点设置为true)
    注意:所有的谷歌位置api都已启用,谷歌Mapapi,地点api和地理编码api都已启用,并提供了一个有效的api密钥。
    我尝试了所有可能的解决方案,包括以下内容:
    1.设置zIndex:1000为高值,以避免隐藏在其他视图后面
    1.尝试创建新的RN应用程序,仅添加此组件以保持项目清洁
    1.重新生成API,甚至使用另一个与REACT NATIVE的早期版本一起工作的API。
    Xcode和Android Studio上的日志均未显示任何内容,代码片段如下:
<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>

先谢谢你

8fsztsew

8fsztsew1#

你的代码加上一些注解对我来说很有效。注解掉了你的函数调用,因为那些没有提供。

<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>
mbskvtky

mbskvtky2#

这种情况发生在我身上,因为我在ScrollView中有这个控件。在ScrollView上使用keyboardShouldPersistTaps=“handled”似乎可以解决这个问题

azpvetkf

azpvetkf3#

我也有同样的问题。
在我尝试了所有的解决方案之后,没有任何效果。即使我已经完成了所有的事情,甚至是谷歌API上的计费配置,位置下拉列表也没有显示。
所以在开始的时候,我用 "Yarn添加React-本地-谷歌-地点-自动完成" 重新安装了谷歌地点自动完成,如果你有npm,那么就用 "npm iReact-本地-谷歌-地点-自动完成"
然后,我从一开始就添加了这两个导入:
从"React-本地-谷歌-地点-自动完成"导入{谷歌地点自动完成};从"@env "文件中导入{GOOGLE_MAPS_APIKEY};
然后我在代码中重写了GooglePlacesAutocomplete & GOOGLE_MAPS_APIKEY:

<GooglePlacesAutocomplete
          placeholder="Where From?"
          styles={{
            container: {
              flex: 0,
            },
            textInput: {
              fontSize: 18,
            },
          }}
          query={{
            key: GOOGLE_MAPS_APIKEY,
            language: "en",
          }}
          nearbyPlacesAPI="GooglePlacesSearch"
          debounce={200}
        />

所以他们定义了 "新导入",并在我的项目文件上执行命令 "Yarn安装",即使它已经是最新的。
最后,我使用命令 "expo r-c" 重新启动我的项目,清除缓存。
希望,这对未来的人有帮助!

fkaflof6

fkaflof64#

这个软件包已经不再维护了,根本就不工作。我在iOS上用expo试过了。我甚至没有得到一个结果列表。我发现了另一个软件包,它工作起来很有魅力:
https://www.npmjs.com/package/react-native-places-input

相关问题