React Native 需要两次点击才能使 onPress 工作答案

【问题标题】：React Native two taps required for onPress to workReact Native 需要两次点击才能使 onPress 工作
【发布时间】：2018-03-28 22:36:48
【问题描述】：

我创建了一个自动完成搜索字段，它使用 mapbox API 显示地点。我正在将 ListView 用于建议列表。当列表出现并且我点击我需要选择的地址时，在第一次点击时键盘隐藏并且 onPress 在第二次点击时工作。

我正在尝试找出问题所在。

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

渲染地址

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

onListItemClicked

onListItemClicked= (address) => {
      this.props.onAddressGet(address);
      console.log(address);
      this.setState({
        searchedAdresses: [],
        inputVal: address.place_name
      });
}

【问题讨论】：

标签： reactjs listview react-native autocomplete mapbox

【解决方案1】：

您应该将keyboardShouldPersistTaps-property 移动到ListView，因为它是ScrollView 的一个属性，将被继承到ListView：

代替

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

你需要：

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

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

【讨论】：

我将 keyboardShouldPersistTaps 属性移动到 ListView 并且它工作了谢谢。
我有同样的问题，但我有View 而不是ScrollView。我应该使用哪个道具来摆脱这个错误？