ScrollView 在 React Native 中删除 TextInput 键盘

Question

我正在使用 TextInput 和自定义清除图标来清除文本。因为我需要在屏幕上保留多个 TextInput，所以我使用了 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。

Answer 1

ScrollView 有道具 keyboardShouldPersistTaps。您应该将其设置为 'handled'，这样您的 TouchableOpacity 将处理媒体而不是 ScrollView。

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

ScrollView 在 React Native 中删除 TextInput 键盘

ScrollView removing TextInput keyboard in React Native

textinput

scrollview

react-native