React Native 中如何监听 SearchBar 聚焦状态并通过 useState 存储？

实现方法 #

你可以直接通过SearchBar组件自带的onFocus、onBlur事件回调配合useState完成状态存储，具体操作步骤如下：

1. 先声明聚焦状态

import { useState } from 'react';

// 组件内部定义聚焦状态，默认失焦为false
const [isSearchFocused, setIsSearchFocused] = useState(false);

2. 给SearchBar绑定事件回调，修改后的完整代码如下：

<View>
    <SearchBar
        platform={Platform.OS}
        placeholder="Start searching"
        value={stringToSearch}
        onChangeText={text => {
            setStringToSearch(text)
        }}
        {/* 聚焦时更新状态为true */}
        onFocus={() => setIsSearchFocused(true)}
        {/* 失焦时更新状态为false */}
        onBlur={() => setIsSearchFocused(false)}
    />
</View>

后续你可以直接使用isSearchFocused变量判断当前状态，值为true时展示历史搜索内容，值为false时展示其他模块即可。如果你使用的是自己封装的自定义SearchBar组件，没有默认暴露这两个事件属性，只需要在自定义组件内部把内部输入框的onFocus、onBlur事件透传到组件props中即可正常使用。

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