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

简述

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

解决方案

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 (
             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 (
            
                
                    
                         this.assignNumberInputRef(input, index)}
                            numberOfLines={1}
                            style={{flex: 1, color: '#F9712C', fontSize: 14, textAlign: 'right', padding: 0}}/>
                    
                
            

        );
    };
}