在本机中隐藏键盘

reactjs React.js

达蒙逆天Pro

2020-03-09

如果我点击一个文本输入,我希望能够点击其他地方以便再次关闭键盘(虽然不是回车键)。在我阅读的所有教程和博客文章中,我都没有找到与此相关的丝毫信息。

在Simulator中使用本机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>

第358篇《在本机中隐藏键盘》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
蛋蛋和田 2020.03.09

试试看keyboard.dismiss()对我有用

神奇 2020.03.09

使用这个包 react-native-keyboard-aware-scroll-view

使用该组件作为您的根组件

由于此程序包react-native-keyboard-aware-scroll-view还具有一个scrollView,因此需要将其添加到其中:

<KeyboardAwareScrollView keyboardShouldPersistTaps="handled"> <ScrollView keyboardShouldPersistTaps="handled"></ScrollView> </KeyboardAwareScrollView>

猿小小 2020.03.09

Keyboard.dismiss()会做的。但是有时它可能会失去焦点,并且Keyboard将无法找到参考。最一致的方法是ref=_ref在textInput上放置一个,然后_ref.blur()在需要关闭时以及_ref.focus()在需要拿回键盘时执行。

十三泡芙 2020.03.09

ScrollView使用中

keyboardShouldPersistTaps="handled" 

这将完成您的工作。

MandyL 2020.03.09

使用keyboardShouldPersistTaps中的,ScrollView您可以传入“处理”,它处理了人们说的使用ScrollView所带来的问题。这就是文档中有关使用“处理的”的内容:the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). 在这里引用它。

LEva卡卡西 2020.03.09

https://facebook.github.io/react-native/docs/keyboard.html

采用

Keyboard.dismiss(0);

隐藏键盘。

GreenSam 2020.03.09

将组件包装在中TouchableWithoutFeedback可能会导致一些奇怪的滚动行为和其他问题。我更喜欢将最上面的应用程序包装在内,ViewonStartShouldSetResponder填充属性。这将允许我处理所有未处理的触摸,然后关闭键盘。重要的是,由于处理程序函数返回false,因此触摸事件像正常情况一样向上传播。

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }
Near猴子 2020.03.09

如果我没记错的话,最新版本的React Native已经解决了这个问题,可以通过点击来关闭键盘。

小胖前端逆天 2020.03.09

我刚刚使用最新的React Native版本(0.4.2)进行了测试,当您在其他位置点击时,键盘将关闭。

仅供参考:您可以通过将键盘分配给“ onEndEditing”道具来设置在关闭键盘时执行的回调函数。

Jim古一 2020.03.09

的更新使用ScrollViewReact Native 0.39

<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} />

虽然,两个TextInput盒子仍然有问题例如。现在,在输入之间切换时,用户名和密码形式将关闭键盘。希望能得到一些建议,以便TextInputs在使用ScrollView

卡卡西逆天 2020.03.09

使用ScrollView代替,View并将keyboardShouldPersistTaps属性设置为false。

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>
蛋蛋Near 2020.03.09

简单的答案是使用ScrollView而不是View并将可滚动属性设置为false(尽管可能需要调整某些样式)。

这样,当我轻按其他位置时,键盘就消失了。这可能是react-native的问题,但是tap事件似乎仅由ScrollViews处理,这导致了所描述的行为。

编辑:感谢jllodra。请注意,如果您直接点击另一个Textinput然后在外面,键盘仍然不会隐藏。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android