当用户单击react-native paper搜索栏输入之外时隐藏键盘并失去焦点

Question

我使用react-native-paper searchbar组件来实现搜索组件。以下是我开发的基本代码。但是，当我在搜索输入字段外部单击时，键盘不会折叠，并且 onFocus 不会从输入中删除。

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

const SearchBar = () => {
  const [searchQuery, setSearchQuery] = React.useState('');

  const onChangeSearch = query => setSearchQuery(query);
  cons onClick = () => { console.log(`searching for ${query}`);};

  return (
    <Searchbar
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
      onIconPress={onClick}
    />
  );
};

export default SearchBar;

有人可以让我知道当用户在搜索输入之外单击时如何隐藏键盘吗？谢谢。

Answer 1

您可以将所有内容包装在 a 中TouchableWithoutFeedback并手动关闭键盘（这也会使其失去焦点）。

这是一个最小的工作示例。

import React from 'react';
import { TouchableWithoutFeedback, Keyboard } from 'react-native';
import { Searchbar } from 'react-native-paper';

...

    return (
      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
        <View style={{flex: 1, paddingTop: 100}}>
            <Searchbar
            placeholder="Search"
            onChangeText={onChangeSearch}
            value={searchQuery}
            onIconPress={onClick}
          />
        </View>
      </TouchableWithoutFeedback>
    );