React-Native - InputText 不会失去焦点

Question

在我的React-Native项目中，我正在使用一些文本输入。我有一个特定用例的问题。

https://snack.expo.io/b1rcy4eef

您在此小吃项目中可以看到，我有一个橙色的广场和一个文本输入。

当我的输入文本集中时，我希望当我利用视图的另一个组成部分时，我希望它失去焦点。例如，橙色广场。

我想要一个不的解决方案要求我添加键盘。。

感谢您的理解＆amp;＆amp;您的帮助！

Answer 1

您不必向每个组件添加解雇，只添加一个全屏视图处理触摸和解散键盘将起作用。

render() {
    return (<View style={styles.container} >
        <View style={{height: 300, width: 300, backgroundColor: 'orange'}}>
        </View>
        <Text style={styles.paragraph}>
          Thanks for your time !
          Tap the InputText and try to lose focus while tapping on the 
          Square above
        </Text>
        <TouchableOpacity 
         style={{position:"absolute", 
             backgroundColor:"rgba(0,0,0,0)", 
             opacity:0, 
             width:Dimensions.get('window').width, 
             height:Dimensions.get('window').height, 
             left:0,
             top:0}} 
         onPress= {this._onClick.bind(this)}/>
       <TextInput
          value={this.state.inputValue}
          ref={(c)=>this._textInput = c}
          onChangeText={this._handleTextChange}
          autoCorrect={false}
          style={{ width: 200, height: 50, borderWidth: 1, padding: 8 }}
        />
      </View>
    );
}
_isContainInRect(rect, point){
    return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= 
    rect.y && point.y <= rect.y + rect.height;
}
_onClick(e){
    console.log("............onclick")
    let a = e.nativeEvent;
    let point = { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY };
    this._textInput.measure((fx, fy, width, height, px, py) => {
        let rect = { x: px, y: py, width, height }
        if (!this._isContainInRect(rect, point)) {
            console.log("will dismiss....")
            dismissKeyboard();
        }
    });
}