如何在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>
        )
    }
}

这是最简单的方法

import {Keyboard} from 'react-native'

然后使用函数Keyboard.dismiss()

这是所有。

下面是我代码的截图，这样你可以更快地理解。

现在用TouchableWithoutFeedback和onPress函数来包装整个视图是keyboard。dismiss()

下面是一个例子

这样，如果用户点击屏幕上的任何地方，不包括textInput字段，键盘将被解散。

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

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

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

方法2;

感谢用户@ricardo-stuven指出这一点，还有另一种更好的方法来消除键盘，你可以在react原生文档的例子中看到。

简单地导入键盘并调用它的方法dismiss()

使用ScrollView代替带有keyboardShouldPersistTaps={"always"}属性的View。当我们点击屏幕内的任何地方时，它会隐藏键盘

<ScrollView keyboardShouldPersistTaps={"always"}>
 <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>
</ScrollView>