React Native ScrollView 包含TextInput组件的区域无法响应滚动事件

迈不过友情╰ 2023-03-02 10:11 56阅读 0赞

## 简述 ##

当ScrollView中包含TextInput，且TextInput的textAlign设置为right时，此时触摸到TextInput上面，拖动滑动会发现没有任何滑动效果，这是因为事件被TextInput消费掉了[（具体可参见）][Link 1]。

## 解决方案 ##

NumberInput

import React, {Component} from 'react';
    import {TextInput} from 'react-native';
    
    export default class NumberInput extends Component {
    
        focus = () => {
            if (this.inputRef) {
                this.inputRef.focus();
            }
        };
    
    
        blur = () => {
            if (this.inputRef) {
                this.inputRef.blur();
            }
        };
    
        inputRef: ?TextInput;
    
        assignRef = (inputRef: ?TextInput) => {
            if (inputRef) {
                this.inputRef = inputRef;
            }
        };
    
        render() {
            return (
                <TextInput
                    keyboardType="numeric"
                    ref={inputRef => this.assignRef(inputRef)}
                    {...this.props}
                />
            );
        };
    }

NumberInput使用Demo

import React, {Component} from 'react';
    import {TextInput} from 'react-native';
    
    export default class NumberInputDemo extends Component {
    
        handleInputPress = (index: number) => () => {
            if (this.input[index]) {
                this.input[index].focus();
            }
        };
    
        input: NumberInput[] = [];
    
        assignNumberInputRef = (inputRef: ?NumberInput, index: number) => {
            if (inputRef) {
                this.input[index] = inputRef;
            }
        }
    
        render() {
            return (
                <ScrollView>
                    <TouchableOpacity activeOpacity={1} style={
       {flex: 1}} onPress={this.handleInputPress(index)}>
                        <View pointerEvents="none" style={
       {flexDirection: 'row', flex: 1}}>
                            <NumberInput
                                ref={input => this.assignNumberInputRef(input, index)}
                                numberOfLines={1}
                                style={
       {flex: 1, color: '#F9712C', fontSize: 14, textAlign: 'right', padding: 0}}/>
                        </View>
                    </TouchableOpacity>
                </ScrollView>
    
            );
        };
    }

[Link 1]: https://github.com/facebook/react-native/issues/12167