[英]Dismissing Keyboard in React Native
I have multiple components in my app where I get user inputs using a keyboard.我的应用程序中有多个组件,我使用键盘获取用户输入。 Now I want to dismiss the keyboard whenever user presses outside of the text input field.现在我想在用户在文本输入字段之外按下时关闭键盘。
I know there is TouchableWithoutFeedback in which I can wrap my component, but whats the best way to do it for multiple screens having this issue.我知道有TouchableWithoutFeedback我可以在其中包装我的组件,但是对于有这个问题的多个屏幕来说,最好的方法是什么。
Shall I create a HOC for this that handles TouchableWithoutFeedback ??我应该为此创建一个处理TouchableWithoutFeedback的 HOC 吗?
You can do this你可以这样做
<KeyboardAvoidingView behavior="padding">
<ScrollView keyboardShouldPersistTaps="handled">
// Rest of your code
</ScrollView
</KeyboardAvoidingView>
HOC is the best approach imo HOC 是 imo 的最佳方法
import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';
const DismissKeyboardHOC = (Comp) => {
return ({ children, ...props }) => (
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<Comp {...props}>
{children}
</Comp>
</TouchableWithoutFeedback>
);
};
export const DismissKeyboardView = DismissKeyboardHOC(View)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.