keyBoard打开React本机时出现双击按钮问题 [英] Double Tap Button issue when keyBoard opens React native

问题描述

我知道有关此主题的查询已经很多，我已经尝试了所有步骤，但仍然无法解决该问题.

I know there are already so many queries on this topic, I have tried every step but still won't be able to fix the issue.

这是代码:

    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 **所建议的波纹管代码:

**I even tried with bellow code as suggested by @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 ，但仍然必须在自定义按钮"上轻按两次以执行操作.有人可以告诉我我在代码中做错了什么吗?

I have tried with keyboardShouldPersistTaps=handled also but still, I have to tap twice on my Custom Button to perform an action. Can anybody tell me what I am doing wrong inside the code?

谢谢.

推荐答案

您需要在 keyboardShouldPersistTaps 中添加始终值，以允许用户点击而不关闭键盘. /p>

You need to add give value always in keyboardShouldPersistTaps to allow user tap without closing the keyboard.

keyboardShouldPersistTaps='always'

例如:

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

注意:请将可点击的组件放入ScrollView中.否则它将无法正常工作.

NOTE: Kindly put your tappable component inside the ScrollView. Otherwise it won't work.

这篇关于keyBoard打开React本机时出现双击按钮问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！