通过点击外部来模糊 <TextInput/>，在本机反应中不起作用

Posted 2023-04-14

【中文标题】通过点击外部来模糊 <TextInput/>，在本机反应中不起作用

【英文标题】：blur <TextInput/> by tapping outside of it, doesn't work in react native

【发布时间】：2018-10-17 02:20:08

【问题描述】：

我有<TextInput/>，我想在<TextInput/> 之外敲击时模糊它并切换键盘我尝试过this 解决方案，但没有任何运气。

import React,  Component  from 'react'; import  AppRegistry, Dimensions, StyleSheet, Text, TouchableHighlight, View, Image, TextInput, ScrollView, Keyboard, TouchableWithoutFeedback  from 'react-native'; import  Button  from 'react-native-elements'; class CounterextendsComponent 

  render() 
    return (
      <View
        style=styles.container
        onPress=this.focusOff
      >
        <TouchableWithoutFeedback onPress=Keyboard.dismiss accessible=false>
          <View>
            <TextInput
              ref="numberInput"
              id=this.props.id
              style=styles.title
              keyboardType='numeric'
              maxLength=2
              value=this.state.keys.toString()
              onChange=(event) => this.updateKeysWithInputHandler(event.nativeEvent.text)
            />
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  

【参考方案1】：

您需要将父容器的dimensions / flex 传递给TouchableWithoutFeedback 才能使其工作。

假设您的styles.container 中有flex: 1，请添加

<TouchableWithoutFeedback style=flex: 1 onPress=Keyboard.dismiss accessible=false>

到您的 子组件，以便它继承 flex。