React Native中发送按钮在键盘弹出时无法调用关联函数

开发者阿泽

2026-6-21

解决React Native中Pressable在TextInput聚焦时首次点击不触发函数的问题

问题原因

在iOS（部分Android场景也会出现）中，当TextInput处于聚焦状态、键盘弹出时，点击非输入区域的Pressable，系统会优先触发TextInput的失焦操作，导致首次点击的onPress事件被拦截，只有第二次点击才会触发绑定的函数。

解决方案

这里提供两种实用的解决方法：

方法1：改用`onPressIn`替代`onPress`

onPressIn会在触摸按下的瞬间触发，不会等待系统处理失焦操作，能直接执行你的函数：

function msgInputHandler() {
    console.log("Test");
}

<View style={styles.msgInputContainer}>
  <TextInput
    placeholder="Message..."
    style={[styles.search, { width: "85%" }]}
  />
  <Pressable onPressIn={msgInputHandler}>        
    <Ionicons name="arrow-up-circle" size={40} color="orange" />       
  </Pressable>
</View>

方法2：手动管理TextInput焦点

通过ref手动控制TextInput失焦，确保函数能正常执行：

import { useRef } from 'react';

// ...

const inputRef = useRef(null);

function msgInputHandler() {
    // 先让输入框失焦
    inputRef.current?.blur();
    console.log("Test");
}

<View style={styles.msgInputContainer}>
  <TextInput
    ref={inputRef}
    placeholder="Message..."
    style={[styles.search, { width: "85%" }]}
  />
  <Pressable onPress={msgInputHandler}>        
    <Ionicons name="arrow-up-circle" size={40} color="orange" />       
  </Pressable>
</View>