react-native-google-places-autocomplete 的 onPress 功能不起作用答案

【问题标题】：react-native-google-places-autocomplete's onPress function is not workingreact-native-google-places-autocomplete 的 onPress 功能不起作用
【发布时间】：2020-05-27 20:40:29
【问题描述】：

我正在尝试在我的 react-native 项目中实现 react-native-google-places-autocomplete，而 onPress 函数根本不起作用。我已经尝试过 StackOverflow 上的其他解决方案，但它根本不起作用。我还向父组件添加了“keyboardShouldPersistTaps='always'。如果有帮助，我会使用“navigation.navigate("maps")”进入此屏幕。

这里是代码。

class ChangeAddress extends PureComponent<Props> {
  render() {
    const { navigation } = this.props;

    return (
      <ScrollView
        contentContainerStyle={{ flex: 1 }}
        style={styles.modalContainer}
        keyboardShouldPersistTaps="always">
        <View style={styles.modalHeader}>
          <Button onPress={() => navigation.goBack()} style={styles.backButton}>
            <Image source={backLogo} />
          </Button>
          <View style={styles.searchBar}>
            <View>
              <Text style={styles.pickUpLocation}>Set Pickup Location</Text>
            </View>
            <GooglePlacesAutocomplete
              placeholder="Search"
              minLength={2}
              autoFocus={false}
              listViewDisplayed={false}
              renderDescription={(row) => row.description}
              fetchDetails={true}
              onPress={(data, details = null) => {
                console.log('HIIIIIIIIIIIIIIIIII', data, details);
              }}
              query={{
                key: 'API',
                language: 'en',
              }}
              styles={{
                textInputContainer: {
                  backgroundColor: 'rgba(0,0,0,0)',
                  borderTopWidth: 0,
                  borderBottomWidth: 0,
                  width: '90%',
                },

                textInput: {
                  marginLeft: 0,
                  marginRight: 0,
                  height: 40,
                  color: '#5d5d5d',
                  fontSize: 14,
                  borderWidth: 1,
                  borderColor: '#778899',
                },
                predefinedPlacesDescription: {
                  color: '#1faadb',
                },
                description: {
                  fontWeight: 'bold',
                  borderTopWidth: 0,
                  borderBottomWidth: 0,
                  opacity: 0.9,
                },
                listView: {
                  color: 'black',
                  position: 'absolute',
                  top: 70,
                  left: -40,
                  width: dimens.width,
                  elevation: 1,
                },
              }}
            />
          </View>
        </View>
      </ScrollView>
    );
  }
}

我错过了什么？提前致谢。

【问题讨论】：

标签： react-native

【解决方案1】：

我找到了解决办法。出于某种原因，onPress 函数仅适用于您正在使用组件的同一视图的顶部/一部分的地址。就我而言，我从 listView 中删除了 top:70，令我惊讶的是，我现在可以选择几个地址。 onPress 仅在那些落在父视图上的 listView 的地址上工作。

我做了什么来解决这个问题，我将父视图的高度设置为“100%”，这样当 listView 打开时，它会落在父视图 INSIDE 中。并使用“flex-start”将其向上推。现在可以完美运行。

【讨论】：

【解决方案2】：

 <GooglePlacesAutocomplete
            placeholder='Informe sua rota de hoje'
            keepResultsAfterBlur={true}
            textInputProps={{ onBlur: () => { console.warn("Blur") } }}
            onPress={(data, details) => {
                // 'details' is provided when fetchDetails = true
                console.warn(data, details);
            }}
            // listViewDisplayed={true}
            // fetchDetails={true}
            keyboardShouldPersistTaps={"always"}
            // currentLocation={"Brazil"}
            query={{
                key: GOOGLE_MAPS_APIKEY,
                language: 'pt-BR',
                location: 'Brazil'
            }}
        />

添加 keepResultsAfterBlur={True}

后它对我有用

【讨论】：