React Native 必须双击才能使 onPress 工作

Question

我将 React Native 与 Native Base 库一起使用。当键盘打开时，我需要一个 onPress 事件来触发 Native Base 的 ListItem（相当于 TouchableOpacity）。

我现在必须单击一次以关闭键盘，然后才能按 ListItem。

下面的内容标签等同于 ScrollableView：

<Content keyboardShouldPersistTaps='always' keyboardDismissMode='on-drag'>
  <List>
    <ListItem style={styles.inspectionsItemDivider} itemDivider>
      <TextInput
        autoFocus={true}
        ref={(input) => { this.titleSearch = input }}
        placeholder='Start typing...'
        multiline={true}
        onChangeText={this.setSearchText.bind(this)}
        value={this.getSearchValue()}/>
    </ListItem>
    <View style={styles.searchContainer}>
      <Text style={styles.recentText}>Recommended Descriptions</Text>
      <List dataArray={this.state.searchedDescriptions} 
        renderRow={(description) =>
        <ListItem button onPress={() => this.setInformationDescription(description)}>
          <Text>{description}</Text>
        </ListItem>
      </List>
    </View>
  </List>
</Content>

Answer 1

其实我刚刚弄明白了。我将 keyboardShouldPersistTaps='always' 道具添加到我的列表中，除了 Content 标签：

<Content keyboardShouldPersistTaps='always' keyboardDismissMode='on-drag'>
  <List>
    <ListItem style={styles.inspectionsItemDivider} itemDivider>
      <TextInput
        autoFocus={true}
        ref={(input) => { this.titleSearch = input }}
        placeholder='Start typing...'
        multiline={true}
        onChangeText={this.setSearchText.bind(this)}
        value={this.getSearchValue()}/>
    </ListItem>
    <View style={styles.searchContainer}>
      <Text style={styles.recentText}>Recommended Descriptions</Text>
      <List keyboardShouldPersistTaps='always' dataArray={this.state.searchedDescriptions} 
        renderRow={(description) =>
        <ListItem button onPress={() => this.setInformationDescription(description)}>
          <Text>{description}</Text>
        </ListItem>
      </List>
    </View>
  </List>
</Content>

Answer 2

对于 google 新手，就我而言，我有一个带有 onPress 属性和 searchBar 的平面列表。我想在键盘启动时按下行，我只能通过 double tap.Finally 来完成这个问题是通过使用 flatlist 的 "keyboardShouldPersistTaps" 解决的：

Hide_Soft_Keyboard=()=>{
      Keyboard.dismiss();
    }

....

                <List>
                      <FlatList
                        keyboardShouldPersistTaps = "always"
                        ...
                        renderItem={({item}) => (
                        <ListItem
                          ...
                          ...
                          onPress={() =>{this.Hide_Soft_Keyboard(); this.props.navigation.navigate('Screen2')}}                                                      
                        /> ) }
                        />
                  </List>

React Native 必须双击才能使 onPress 工作

React Native have to double click for onPress to work

react-native

native-base