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

最新推荐文章于 2023-06-12 11:11:36 发布

hzxOnlineOk

最新推荐文章于 2023-06-12 11:11:36 发布

阅读量643

点赞数

原文链接：https://www.jianshu.com/p/8b8c37472d9c

版权

本文探讨了在React Native中，ScrollView包含右对齐TextInput时的滑动冲突问题。详细介绍了事件消费导致的问题根源，并提供了一个NumberInput组件的解决方案，通过自定义组件和事件处理，确保了ScrollView和TextInput的正常交互。

摘要由CSDN通过智能技术生成

简述

当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 (
            <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>

        );
    };
}