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

【问题标题】：Hide keyboard and lose focus when user click outside the react-native-paper searchbar input当用户在 react-native-paper 搜索栏输入之外单击时隐藏键盘并失去焦点
【发布时间】：2022-11-15 16:38:25
【问题描述】：

我使用 react-native-paper 搜索栏组件来实现一个搜索组件。以下是我开发的基本代码。但是当我在搜索输入字段之外单击时，键盘不会折叠并且 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;

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

【问题讨论】：

标签： react-native react-native-paper

【解决方案1】：

您可以将所有内容包装在 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>
    );

【讨论】：

【解决方案2】：

您可以使用以下包装器组件。这对我来说非常适合我。

import { KeyboardAvoidingView, ScrollView } from "react-native";

const KeyboardDismissibleView = ({ backgroundColor = "#F5F4FF", children }) => {
    return <KeyboardAvoidingView behavior="height" style={{ flex: 1, paddingHorizontal: 10, backgroundColor }}>
        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }} keyboardDismissMode="interactive">
            {children}
        </ScrollView>
    </KeyboardAvoidingView>
}

export default KeyboardDismissibleView;

【讨论】：