web-dev-qa-db-fra.com

React Native doit double-cliquer pour que onPress fonctionne

J'utilise React Native avec la bibliothèque Native Base. J'ai besoin d'un événement onPress pour lancer sur Native Base 'ListItem (équivalent à TouchableOpacity) lorsque le clavier est ouvert.

Je dois maintenant cliquer une fois pour fermer le clavier, puis je peux appuyer sur le ListItem.

La balise de contenu ci-dessous est équivalente à 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>
react-nativenative-base
20
Molly Harper

En fait, je viens de comprendre cela. J'ai ajouté l'accessoire keyboardShouldPersistTaps = 'always' à ma liste, en plus de la balise 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>
33
Molly Harper

Pour les nouveaux googleurs, dans mon cas, j'avais une liste plate avec une propriété onPress et une barre de recherche. Je voulais appuyer sur la ligne même lorsque le clavier est en place, et je ne pouvais le faire qu'en appuyant deux fois. Enfin, le problème a été résolu en utilisant "keyboardShouldPersistTaps" de la liste plate:

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

....

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