React Native TextInput onPressOut异常：点击后立即触发

你的onPressOut语法本身没有问题，问题出在用触摸事件判断输入框焦点状态完全不合适——点击TextInput时，onPressIn会在手指按下时触发，但手指抬起后onPressOut立刻执行，这是组件触摸交互逻辑导致的，所以才会出现日志先输出true马上又输出false的情况。

要实现「获取焦点切换样式，失去焦点恢复」的需求，应该用TextInput原生的焦点事件：onFocus和onBlur，这两个事件专门监听输入框焦点状态变化，完全匹配你的场景。

另外你代码里用useState存样式再配合useEffect更新的写法冗余，直接在渲染时根据isActive判断样式即可，简化后的代码如下：

export function SoftSearchBar({
    height=40, 
    width='100%', 
    fontSize=20,
    fireOnChange = () => console.log("No Change Function in place"),
    value = "", // 建议把默认值从false改成空字符串，符合输入框值的类型
    placeholder = "Placeholder",
    type = null
}){
    const [isActive, setActive] = useState(false)

    return(
        <View style={{height: height, flexDirection: 'row'}}>
            <TextInput
                value={value}
                // 替换为焦点事件
                onFocus={() => setActive(true)}
                onBlur={() => setActive(false)}
                // 直接根据isActive切换样式
                style={{
                    ...(isActive ? styles.softSearchActive : styles.softSearchInactive),
                    width: width,
                    zIndex: 0,
                    fontSize: fontSize
                }}
                textContentType={type}
                placeholder={placeholder}
                placeholderTextColor={'black'}
                autoCorrect={false}
                onChangeText={text => fireOnChange(text)}
            />
        </View>
    )
}

关键改动说明： #

• 移除冗余的style状态和useEffect，直接在TextInput的style属性中通过isActive三元表达式切换激活/非激活样式，避免状态不同步问题。
• 替换onPressIn/onPressOut为onFocus/onBlur：
  • onFocus：输入框获得焦点时触发（比如点击输入框、键盘切换聚焦）
  • onBlur：输入框失去焦点时触发（比如点击外部、切换到其他输入框）
• 调整value默认值为""，输入框值应为字符串类型，布尔值可能导致显示异常。

修改后，输入框会在获取焦点时保持激活样式，直到失去焦点才恢复，完全符合你的需求。

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