React Native两个点击使onPress工作

时间:2018-03-14 17:24:49

标签: reactjs listview react-native autocomplete mapbox

我创建了一个autoconplete搜索字段,使用mapbox API显示这些地方。我正在使用ListView for sugesstions列表。当列表出现时,我点击我需要选择的地址,在第一次点击键盘上隐藏,onPress在第二次点击时工作。

enter image description here

我正在试图找出错误的原因。

realloc
  

renderAddress

 <View style={styles.container}>
                          <View style={styles.searchContainer}>
                            <View style={styles.mapMarkerContainer}>
                              {mapMarkerIcon}
                            </View>
                            <View style={styles.inputContainer}>
                              <TextInput
                                  style={styles.textinput}
                                  onChangeText={this.searchLocation}
                                  placeholder="Type your address here" 
                                  underlineColorAndroid='rgba(0,0,0,0)'
                                  value={this.state.inputVal}
                                  placeholderTextColor="#fff"
                              />
                            </View>
                          </View>
                          <View keyboardShouldPersistTaps='always' style={styles.listViewContainer}>
                            <ListView
                                dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
                                renderRow={this.renderAdress} 
                                style={styles.listView}
                                renderSeparator={this.renderSeparator}
                                enableEmptySections
                            />
                          </View>
</View>
  

onListItemClicked

renderAdress = (address) => {
        return (
            <TouchableOpacity onPress={() => this.onListItemClicked(address)} style={styles.listItem}>
                <View>
                    <Text>{address.place_name}</Text>
                </View>
            </TouchableOpacity>
        );
};

1 个答案:

答案 0 :(得分:1)

您应该将keyboardShouldPersistTaps-property移动到ListView,因为它是ScrollView的属性,并将继承到ListView:

而不是

<View keyboardShouldPersistTaps='always' 
    <ScrollView ...>

你需要:

<View 
    <ScrollView keyboardShouldPersistTaps='always'  ...>

https://facebook.github.io/react-native/docs/scrollview.html#keyboardshouldpersisttaps