React Native中点击TouchableWithoutFeedback如何触发TextInput聚焦

核心问题与修复方案 #

你的代码存在3个核心错误导致点击聚焦功能失效：

1. 未给TextInput绑定ref，无法获取输入框实例调用聚焦方法
2. TouchableWithoutFeedback的onPress属性直接执行了函数，而非传入函数引用，会导致组件渲染时就自动执行逻辑，而非点击触发
3. 未正确调用TextInput实例的focus()方法实现聚焦

具体修改步骤 #

1. 新增导入useRef钩子

import React, { useState, useRef } from 'react';

2. 组件内部创建输入框ref实例

const MainScreen = ({ navigation }) => {
  const [text, setText] = useState("");
  // 新增以下行
  const inputRef = useRef(null);
  // 其余代码不变

3. 替换输入框区域的代码

<View style={[styles.input,{ flexDirection: "row", alignItems: "center" }]}>
  <TouchableWithoutFeedback onPress={() => inputRef.current?.focus()}>
    {/* 加padding扩大点击区域，避免点击无响应 */}
    <Text style={{ marginLeft: 5, padding: 8 }}>O</Text>
  </TouchableWithoutFeedback>
  <TextInput 
    ref={inputRef}
    style={{ flex: 1 }} 
    placeholder="Search" 
    placeholderTextColor="#B9B9C5" 
    onChangeText={setText} 
    value={text}
  />
</View>

修改说明 #

• 通过useRef绑定TextInput组件，获取输入框的实例对象
• onPress传入箭头函数，仅在点击时执行聚焦逻辑，避免渲染时自动执行
• 用可选链?.调用focus方法，避免ref未完成挂载时报错
• 给左侧"O"增加内边距，扩大点击响应区域，提升交互体验

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