React Native have to double click for onPress to work

前端 未结 2 1599
隐瞒了意图╮
隐瞒了意图╮ 2020-12-17 09:07

I\'m using React Native with the Native Base library. I need an onPress event to fire on Native Base\' ListItem (equivalent to TouchableOpacity) when the keyboard is open. <

相关标签:
2条回答
  • 2020-12-17 09:40

    I actually just figured this out. I added the keyboardShouldPersistTaps='always' prop to my List, in addition to the Content tag:

    <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>
    
    0 讨论(0)
  • 2020-12-17 09:45

    For new googlers, in my case, I had a flatlist with an onPress property, and a searchBar. I wanted to press the row even when the keyboard is up, and I could do it only by double tap.Finally the problem was tackled by using "keyboardShouldPersistTaps" of the flatlist:

    Hide_Soft_Keyboard=()=>{
          Keyboard.dismiss();
        }
    
    ....
    
                    <List>
                          <FlatList
                            keyboardShouldPersistTaps = "always"
                            ...
                            renderItem={({item}) => (
                            <ListItem
                              ...
                              ...
                              onPress={() =>{this.Hide_Soft_Keyboard(); this.props.navigation.navigate('Screen2')}}                                                      
                            /> ) }
                            />
                      </List>
    
    0 讨论(0)
提交回复
热议问题