react-native - ScrollView 在 React Native 中删除 TextInput 键盘

Question

我正在使用TextInput自定义清除图标来清除文本。由于我需要TextInput在屏幕中保留多个 s，因此我使用了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.

标签： react-nativescrollviewtextinput

Answer 1

有ScrollView一个道具keyboardShouldPersistTaps。您应该将其设置为'handled'以便您TouchableOpacity将处理新闻而不是ScrollView.

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