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

np8igboo 于 2023-01-22 发布在 iOS

关注(0)|答案(4)|浏览(117)

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

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>

先谢谢你

ios

来源：https://stackoverflow.com/questions/60187491/react-native-google-places-autocomplete-not-working-on-react-native-0-61

4条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-01-22

mbskvtky2#

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

赞(0）回复(0）举报 2023-01-22

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" 重新启动我的项目，清除缓存。
希望，这对未来的人有帮助!

赞(0）回复(0）举报 2023-01-22

fkaflof64#

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

赞(0）回复(0）举报 2023-01-22