gpt4 book ai didi

reactjs - 在react-native中隐藏键盘

转载 作者:行者123 更新时间:2023-12-03 03:57:07 25 4
gpt4 key购买 nike

如果我点击文本输入,我希望能够点击其他地方以便再次关闭键盘(尽管不是返回键)。在我读过的所有教程和博客文章中,我没有找到任何与此相关的信息。

这个基本示例仍然无法在模拟器中使用react-native 0.4.2。还无法在我的 iPhone 上尝试。

<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onEndEditing={this.clearFocus}
/>
</View>

最佳答案

如果您有 keyboardType='numeric',键盘不关闭的问题会变得更加严重,因为无法关闭它。

用 ScrollView 替换 View 并不是一个正确的解决方案,就像您有多个 textInputbutton 一样,在键盘打开时点击它们只会关闭键盘。

正确的做法是用TouchableWithoutFeedback封装View并调用Keyboard.dismiss()

编辑:您现在可以将 ScrollViewkeyboardShouldPersistTaps='handled' 结合使用,仅在子项未处理点击时关闭键盘(即点击其他项)文本输入或按钮)

如果你有

<View style={{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>

更改为

<ScrollView contentContainerStyle={{flexGrow: 1}}
keyboardShouldPersistTaps='handled'
>
<TextInput keyboardType='numeric'/>
</ScrollView>

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>
</TouchableWithoutFeedback>

编辑:您还可以创建一个高阶组件来关闭键盘。

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>
);
};
const DismissKeyboardView = DismissKeyboardHOC(View)

像这样使用它

...
render() {
<DismissKeyboardView>
<TextInput keyboardType='numeric'/>
</DismissKeyboardView>
}

注意:需要 accessible={false} 才能继续通过 VoiceOver 访问输入表单。视障人士会感谢您!

关于reactjs - 在react-native中隐藏键盘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29685421/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com