React Native中用useRef实现点击ScrollView空白处聚焦TextInput的问题

你遇到的问题和useRef用法无关，它的写法是正确的。问题出在外层TouchableWithoutFeedback和ScrollView的触摸事件冲突，以及触摸事件周期内的聚焦时机问题上。

核心原因 #

1. 当TextInput未聚焦时，ScrollView作为可滚动组件会优先处理触摸事件，即使外层TouchableWithoutFeedback触发了onPress，直接调用focus()也会被ScrollView的触摸事件逻辑中断，导致聚焦失败；后续点击无日志则是因为ScrollView抢占了触摸拦截权，外层Touchable不再响应。
2. 当TextInput聚焦后，键盘弹出改变了触摸事件的处理逻辑，外层Touchable又能正常响应。

解决方案 #

调整组件层级和事件处理逻辑，具体代码如下：

import { useRef } from 'react';
import { ScrollView, TextInput, TouchableWithoutFeedback, View, StyleSheet } from 'react-native';

export function MainInput() {
    const ref_textinput = useRef();

    const onTapScrollViewBody = () => {
        console.log("Detected tap");
        // 延迟到下一个事件周期执行聚焦，避免被触摸事件中断
        setTimeout(() => {
            ref_textinput.current?.focus();
        }, 0);
    }
    
    return (
        <ScrollView 
            style={styles.parentScrollView}
            // 禁止ScrollView因键盘状态拦截触摸事件
            keyboardShouldPersistTaps='always'
        >
            {/* 全屏背景Touchable，作为空白区域的点击容器 */}
            <TouchableWithoutFeedback 
                onPress={onTapScrollViewBody}
                style={styles.backgroundTouchable}
            >
                <View style={styles.backgroundView} />
            </TouchableWithoutFeedback>
            
            <TextInput
                ref={ref_textinput}
                style={styles.textInput}
                placeholder="输入内容"
            />
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    parentScrollView: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    backgroundTouchable: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 0,
    },
    backgroundView: {
        flex: 1,
    },
    textInput: {
        zIndex: 1,
        height: 50,
        backgroundColor: 'white',
        margin: 16,
        paddingHorizontal: 12,
        borderRadius: 8,
    },
});

关键调整说明 #

1. 层级调整：把TouchableWithoutFeedback移到ScrollView内部，作为绝对定位的全屏背景，既覆盖空白区域，又不会遮挡TextInput（通过zIndex控制层级）。
2. 事件配置：给ScrollView添加keyboardShouldPersistTaps='always'，确保触摸事件不会被键盘相关逻辑拦截。
3. 聚焦时机：用setTimeout把聚焦操作延迟到下一个事件周期执行，避免被ScrollView的触摸事件逻辑中断。

内容的提问来源于stack exchange，提问作者Allen Y