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

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

当前回答

Keyboard.dismiss()就会这样做。但有时它可能会失去焦点,键盘将无法找到ref。最一致的方法是将ref=_ref放到textInput中,当你需要解除时执行_ref.blur(),当你需要恢复键盘时执行_ref.focus()。

其他回答

有几种方法, 如果你像onPress一样控制事件,你可以使用:

import { Keyboard } from 'react-native'

onClickFunction = () => {
     Keyboard.dismiss()
}

如果你想关闭键盘时使用滚动:

<ScrollView keyboardDismissMode={'on-drag'}>
     //content
</ScrollView>

更多的选项是当用户点击键盘外:

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}}>
    //inputs and other content
</KeyboardAvoidingView>

如何在TextInput周围/旁边放置一个可触摸组件?

var INPUTREF = 'MyTextInput';

class TestKb extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}>
                <View>
                    <TextInput ref={'MyTextInput'}
                        style={{
                            height: 40,
                            borderWidth: 1,
                            backgroundColor: 'grey'
                        }} ></TextInput>
                </View>
                <TouchableWithoutFeedback onPress={() => this.refs[INPUTREF].blur()}>
                    <View 
                        style={{ 
                            flex: 1, 
                            flexDirection: 'column', 
                            backgroundColor: 'green' 
                        }} 
                    />
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

将TextInput的父组件View包装到一个可压组件中,然后传递Keyboard。解散到onPress道具。因此,如果用户点击TextInput字段之外的任何地方,它将触发键盘。导致TextInput字段失去焦点,键盘被隐藏。

<Pressable onPress={Keyboard.dismiss}>
  <View>
    <TextInput
      multiline={true}
      onChangeText={onChangeText}
      value={text}
      placeholder={...}
     />
   </View>
</Pressable>

我刚刚使用最新的React Native版本(0.4.2)进行了测试,当你点击其他地方时,键盘就会消失。

供你参考:你可以设置一个回调函数,当你解散键盘时,通过将它分配给“onenditing”道具来执行。

使用react-native中的KeyBoard API就可以了。

import { Keyboard } from 'react-native'

// Hide the keyboard whenever you want using !
Keyboard.dismiss()