打开键盘时，React Native的双击按钮存在问题

Question

我知道这个话题已经有很多查询了，我已尝试了每个步骤，但问题仍未得到解决。

这是代码：

    render() {
    const {sContainer, sSearchBar} = styles;

    if (this.props.InviteState.objectForDeleteList){
      this.updateList(this.props.InviteState.objectForDeleteList);
    }
    return (
      <View style={styles.mainContainer}>
        <CustomNavBar
          onBackPress={() => this.props.navigation.goBack()}
        />
        <View
          style={sContainer}
        >
          <ScrollView keyboardShouldPersistTaps="always">
            <TextInput
              underlineColorAndroid={'transparent'}
              placeholder={'Search'}
              placeholderTextColor={'white'}
              selectionColor={Color.colorPrimaryDark}
              style={sSearchBar}
              onChangeText={(searchTerm) => this.setState({searchTerm})}
            />
          </ScrollView>
          {this.renderInviteUserList()}
        </View>
      </View>
    );
  }

renderInviteUserList() {
    if (this.props.InviteState.inviteUsers.length > 0) {
      return (
        <SearchableFlatlist
          searchProperty={'fullName'}
          searchTerm={this.state.searchTerm}
          data={this.props.InviteState.inviteUsers}
          containerStyle={styles.listStyle}
          renderItem={({item}) => this.renderItem(item)}
          keyExtractor={(item) => item.id}
        />
      );
    }
    return (
      <View style={styles.emptyListContainer}>
        <Text style={styles.noUserFoundText}>
          {this.props.InviteState.noInviteUserFound}
        </Text>
      </View>
    );
  }


renderItem(item) {
    return (
      this.state.userData && this.state.userData.id !== item.id
        ?
        <TouchableOpacity
          style={styles.itemContainer}
          onPress={() => this.onSelectUser(item)}>
          <View style={styles.itemSubContainer}>
            <Avatar
              medium
              rounded
              source={
                item.imageUrl === ''
                  ? require('../../assets/user_image.png')
                  : {uri: item.imageUrl}
              }
              onPress={() => console.log('Works!')}
              activeOpacity={0.7}
            />
            <View style={styles.userNameContainer}>
              <Text style={styles.userNameText} numberOfLines={1}>
                {item.fullName}
              </Text>
            </View>
            <CustomButton
              style={{
                flexWrap: 'wrap',
                alignSelf: 'flex-end',
                marginTop: 10,
                marginBottom: 10,
                width: 90,
              }}
              showIcon={false}
              btnText={'Add'}
              onPress={() => this.onClickSendInvitation(item)}
            />
          </View>
        </TouchableOpacity> : null
    );

  }

我甚至尝试了下面这段代码，正如@Nirmalsinh所建议的：

**我甚至尝试了下面这段代码，正如@Nirmalsinh所建议的：**

<ScrollView keyboardShouldPersistTaps="always" style={sContainer}>
        <CustomNavBar
          onBackPress={() => this.props.navigation.goBack()}
        />
        <TextInput underlineColorAndroid={'transparent'}
          placeholder={'Search'}
          placeholderTextColor={'white'}
          selectionColor={Color.colorPrimaryDark}
          style={sSearchBar}
          onChangeText={(searchTerm) => this.setState({searchTerm})} />
        {this.renderInviteUserList()}
      </ScrollView>

我已经按照这篇文章的指示进行了操作：

https://medium.com/react-native-training/todays-react-native-tip-keyboard-issues-in-scrollview-8cfbeb92995b

我尝试了keyboardShouldPersistTaps=handled，但仍然需要在我的自定义按钮上点击两次才能执行操作。有人能告诉我代码中出了什么问题吗？

谢谢。

- user2028

Answer 1

您可以在ScrollView或FlatList、SectionList等可滚动组件中使用keyboardShouldPersistTaps='handled'，并嵌入一个TouchableWithoutFeedBack来处理在外部点击时消失的情况。

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
 <ScrollView keyboardShouldPersistTaps='handled'>
   // Rest of the content.
 </ScrollView/>
</TouchableWithoutFeedback>

对于 FlatList 和 SectionList，你需要单独处理 KeyBoard.dismiss。

- Haseeb A

---

点赞...请查看文档了解“always”和“handled”的区别。对我来说，“handled”效果更好。当点击被[子元素，如按钮按下]处理时，键盘不会自动消失。 - Trevor Allred

如果我不想要一个ScrollView呢？ - Santiago Dandois

Answer 2

您需要在 keyboardShouldPersistTaps 中始终添加给定值，以允许用户在不关闭键盘的情况下点击。

keyboardShouldPersistTaps='always'

例如：

<ScrollView keyboardShouldPersistTaps='always'>
 // Put your component
</ScrollView>

注意：请将可点击的组件放在ScrollView内。否则它将无法正常工作。

- Nirmalsinh Rathod

---

嗨@Nirmalsinh，已经有了：<View style={sContainer} > <ScrollView keyboardShouldPersistTaps="always"> <TextInput underlineColorAndroid={'transparent'} placeholder={'搜索'} placeholderTextColor={'白色'} selectionColor={Color.colorPrimaryDark} style={sSearchBar} onChangeText={(searchTerm) => this.setState({searchTerm})} /> </ScrollView> {this.renderInviteUserList()} </View> - user2028

this.renderInviteUserList() 包含 SearchableFlatlist，里面有 renderItem 函数，其中包含按钮组件。因此，将 this.renderInviteUserList() 放在 scrollview 中，整个组件将自动位于 scrollview 下方。 - user2028

<View style={styles.mainContainer}> 替换为 <ScrollView style={styles.mainContainer} keyboardShouldPersistTaps="always"> - Nirmalsinh Rathod

你的主容器是View，并且你正在使用scrollview用于TextInput。并没有任何其他组件。因此，请将您的主组件设置为ScrollView并添加属性。 - Nirmalsinh Rathod

让我们在聊天中继续这个讨论。 - user2028

Answer 3

请尝试这个，它对我有效，它也会对你有效，希望能有所帮助...

- pramod J B

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community