web-dev-qa-db-ja.com

React onPressが機能するためにはネイティブでダブルクリックする必要があります

React NativeとNative Baseライブラリを使用しています。キーボードが開いているときにNative BaseのListItem（TouchableOpacityと同等）で発生するonPressイベントが必要です。

キーボードを閉じるには1回クリックする必要があります。その後、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>
react-nativenative-base
20
Molly Harper

私は実際にこれを理解しました。 Contentタグに加えてkeyboardShouldPersistTaps = 'always' propをリストに追加しました。

<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

私の場合、新しいグーグルの場合、onPressプロパティとsearchBarを持つフラットリストがありました。キーボードが起動していても行を押したくて、ダブルタップでしかできませんでした。最後に、フラットリストの「keyboardShouldPersistTaps」を使用して問題に対処しました。

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