ScrollView удаляет клавиатуру TextInput в React Native

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>