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

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

当前回答

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

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

其他回答

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

import {Keyboard} from 'react-native';

使用keyboard .dismiss()隐藏你的键盘在任何onClick或onPress事件。

我是React的新手,在制作演示应用程序时遇到了完全相同的问题。如果你使用onStartShouldSetResponder道具(此处描述),你可以在一个普通的旧React. view上抓取触摸。很想听听更多经验丰富的反应者对这一策略的看法/如果有更好的策略,但这对我来说是有效的:

containerTouched(event) {
  this.refs.textInput.blur();
  return false;
}

render() {
  <View onStartShouldSetResponder={this.containerTouched.bind(this)}>
    <TextInput ref='textInput' />
  </View>
}

这里需要注意两点。首先,正如这里讨论的,还没有结束所有子视图编辑的方法,所以我们必须直接引用TextInput来模糊它。其次,onStartShouldSetResponder被它上面的其他可触摸控件截获。因此,在容器视图中点击TouchableHighlight等(包括另一个TextInput)将不会触发事件。但是,在容器视图中单击Image仍然会关闭键盘。

如果有人需要一个工作的例子,如何解散一个多行文本输入在这里ya !希望这能帮助一些人,文档没有描述一种方法来消除多行输入,至少没有具体的参考如何做到这一点。仍然是一个在堆栈上实际发帖的新手,如果有人认为这应该是对这个片段所写的实际帖子的引用,请告诉我。

import React, { Component } from 'react'
import {
  Keyboard,
  TextInput,
  TouchableOpacity,
  View,
  KeyboardAvoidingView,
} from 'react-native'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      behavior: 'position',
    }
    this._keyboardDismiss = this._keyboardDismiss.bind(this)
  }

  componentWillMount() {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove()
  }

  _keyboardDidHide() {
    Keyboard.dismiss()
  }

  render() {
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={this.state.behavior}
      >
        <TouchableOpacity onPress={this._keyboardDidHide}>
          <View>
            <TextInput
              style={{
                color: '#000000',
                paddingLeft: 15,
                paddingTop: 10,
                fontSize: 18,
              }}
              multiline={true}
              textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }}
              placeholder="Share your Success..."
              value={this.state.text}
              underlineColorAndroid="transparent"
              returnKeyType={'default'}
            />
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    )
  }
}

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

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