ScrollView 在 React Native 中删除 TextInput 键盘

Posted 2023-04-18

【中文标题】ScrollView 在 React Native 中删除 TextInput 键盘

【英文标题】：ScrollView removing TextInput keyboard in React Native

【发布时间】：2020-11-23 09:41:35

【问题描述】：

我正在使用带有自定义清除图标的TextInput 来清除文本。因为我需要在屏幕上保留多个TextInputs，所以我使用了ScrollView：

import React, Component from 'react';
    import 
      View,
      Text,
      ScrollView,
      StyleSheet,
      Image,
      TouchableOpacity,
      TextInput,
     from 'react-native';

    export default class SuccessScreen extends Component 
      constructor(props) 
        super(props);
        this.state = ;
      

      handleRightClick() 
        console.log('handleRightClick');
      

      render() 
        return (
          <ScrollView>
            <View style=styles.SectionStyle>
              <TextInput style=styles.input />

              <TouchableOpacity
                style=styles.ImageStyle
                onPress=this.handleRightClick>
                <Image source=require('../../images/cross_icon.png') />
              </TouchableOpacity>
            </View>
          </ScrollView>
        );
      
    

    const styles = StyleSheet.create(
      
      input: 
        flex: 1,
        borderColor: '#000000',
        borderBottomWidth: 1,
        height: 40,
        fontSize: 15,
        color: '#000000',
      ,
      

      SectionStyle: 
        flexDirection: 'row',
        minWidth: '100%',
        height: 40,
      ,

      ImageStyle: 
        height: 25,
        width: 25,
        marginLeft: -25,
        alignContent: 'center',
        resizeMode: 'stretch',
        alignItems: 'center',
      ,
    );

没有ScrollView，调用handleRightClick，但是当我使用ScrollView时，它只是关闭键盘而不调用handleRightClick。

【参考方案1】：

ScrollView 有一个属性 keyboardShouldPersistTaps。您应该将其设置为'handled'，以便您的TouchableOpacity 将处理新闻而不是ScrollView。

<ScrollView keyboardShouldPersistTaps='handled'>
  // ...
</ScrollView>

【讨论】：

keyboardShouldPersistTaps='always' 和 keyboardShouldPersistTaps='handled' 工作正常

但是如果你设置'always'，ScrollView 永远不会隐藏键盘。 prop 值取决于所需的行为，我喜欢在我的应用程序中使用'handled'