在react-native中隐藏键盘

如果我点击一个文本输入，我希望能够点击其他地方，以便再次取消键盘(不是返回键)。在我读过的所有教程和博客文章中，我没有发现一丁点关于这方面的信息。

这个基本的例子在模拟器中的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>

当前回答

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

使用该组件作为根组件

因为这个包react-native-keyboard-aware-scroll-view也有一个scrollView，你需要添加这个:

< KeyboardAwareScrollView keyboardShouldPersistTaps =“不同”> < ScrollView keyboardShouldPersistTaps = "不同" > < / ScrollView > < / KeyboardAwareScrollView >

2020-02-06 14:12:06

其他回答

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

2018-04-13 21:14:52

onStartShouldSetResponder道具停止触摸事件传播到TouchableWithoutFeedback元素。

<TouchableWithoutFeedback onPress={...}>
  <View>
    <ScrollView>
      <View onStartShouldSetResponder={() => true}>
        // Scrollable content
      </View>
    </ScrollView>
  </View>
</TouchableWithoutFeedback>

2021-11-25 05:53:03

你可以像下面这样从react-native导入键盘:

import { Keyboard } from 'react-native';

在你的代码中可以是这样的:

render() {
    return (
      <TextInput
        onSubmit={Keyboard.dismiss}
      />
    );
  }

静态解散() 解散活动键盘并移除焦点。

2017-06-17 07:47:14

使用keyboard .dismiss()在任何时候解散键盘。

2021-10-01 08:52:21

我们可以在没有react-native反馈的情况下使用keyboard和tochable

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}
  >
    {children}
  </TouchableWithoutFeedback>
);

并这样使用它:

const App = () => (
  <DismissKeyboard>
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="username"
        keyboardType="numeric"
      />
      <TextInput
        style={styles.input}
        placeholder="password"
      />
    </View>
  </DismissKeyboard>
);

我还在这里用源代码进行了解释。

2020-10-20 09:54:51

在react-native中隐藏键盘

推荐文章

最新文章

标签