Question

在我的React原生项目中，我正在使用一些TextInput。我遇到了特定用例的问题。

https://snack.expo.io/B1RCy4Eef

正如您在此Snack项目中所看到的，我正在使用Orange Square和TextInput。

当我的InputText被聚焦时，我希望它在我点击我的View的另一个组件时失去焦点，例如橙色方块。

我想要一个解决方案不要求我将 Keyboard.dismiss（）调用添加到我的根视图的每个组件或我的根视图本身

感谢您的理解＆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();
        }
    });
}

React-Native - InputText不会失去焦点

1 个答案: