react-native-google-places-autocomplete的onPress函数无法正常工作

gcxthw6b  于 2022-11-25  发布在  React
关注(0)|答案(3)|浏览(156)

我尝试在我的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>
    );
  }
}

我错过了什么?提前谢谢你。

wwtsj6pe

wwtsj6pe1#

我找到了一个解决方案。由于某种原因,onPress函数只对位于顶部/部分视图的地址有效,而您正在使用组件。在我的例子中,我从listView中删除了top:70,令我惊讶的是,我现在可以选择一些地址。onPress可以工作,但只对那些位于父视图的listView地址有效。
我所做的就是给父视图一个“100%”的高度,这样当listView打开时,它会福尔斯在父视图的 * 内部 *。然后使用“flex-start”把它向上推。现在工作得很完美。

ttisahbt

ttisahbt2#

<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}后,它对我有效

bwitn5fc

bwitn5fc3#

要解决此问题,请在“Scrollview”中添加“keyboardShouldPersistTaps”属性,方法是添加此问题解决

相关问题