React-Native-InputText不会失去焦点

Question

在我的React-native项目中，我使用了一些TextInput。 我在特定用例上遇到问题。

https://snack.expo.io/B1RCy4Eef

如您在这个Snack项目中看到的，我有一个Orange Square和一个TextInput。

当我的InputText处于焦点状态时，当我点击视图的另一个组件（例如橙色正方形）时，我希望它失去焦点。

我想这并不需要我去Keyboard.dismiss（）调用添加到我的根视图或我的根视图本身的每个组件的解决方案。

感谢您的理解&&您的帮助！

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();
        }
    });
}