Reactjs 在 reactnative 中隐藏键盘

发布于01月14日

如果我点击文本输入，我希望能够点击其他地方，以便再次关闭键盘(而不是返回键).在我读过的所有教程和博客帖子中，我都没有发现任何与此相关的信息.

这个基本示例在模拟器中的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不是一个正确的解决方案，就像你有多个textInput或button，在键盘打开时点击它们只会关闭键盘.

正确的方法是用TouchableWithoutFeedback和Keyboard.dismiss()封装视图

编辑:您现在可以使用ScrollView和keyboardShouldPersistTaps='handled'来关闭键盘，只有当点击不由子元素们处理时(即点击其他文本输入或按钮)

如果你有

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

换成

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

或

imp或t {Keyboard} from 'react-native'

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

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

imp或t React from 'react';
imp或t { 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>
}

NOTE: the accessible={false} is required to make the input f或m continue to be accessible through VoiceOver. Visually impaired people will thank you!