React-native解除鍵盤當焦點/點擊其他地方，在文本框外

我是新來的反應原生。我有一個文本框（輸入）。當用戶單擊除輸入字段以外的其他位置時，我想讓鍵盤解除。我嘗試了幾個解決方案，如TouchableWithoudFeedback，但他們沒有奏效。此外，我不明白這一點，我可以使用onFocus中的任何功能，另一方面，沒有任何工作在onBlur或onEndEditing 這裏是我的輸入組件的代碼。React-native解除鍵盤當焦點/點擊其他地方，在文本框外

<InputGroup borderType='rounded' style={styles.inputGrp}> 
            <Input placeholder={'Password'} secureTextEntry={true} style={styles.input} 
              onChangeText={(pin1) => this.setState({pin1: pin1})} 
              value={this.state.pin1} 
              maxLength={8} 
            />

來源

2016-12-29 Ali Zeynalov

-1

當用戶輸入文字時，您可以使用鍵盤完成按鈕關閉鍵盤。

       <TextInput placeholder={'Password'} secureTextEntry={true} style={styles.input} 
             onChangeText={(pin1) => this.setState({pin1: pin1})} 
             value={this.state.pin1} 
             maxLength={8} 
             onSubmitEditing={()=> this.dismissKeyboardAction()}/>

在某處定義此方法。

dismissKeyboardAction() { 
    dismissKeyboard(); 
    }

，如果你想關閉鍵盤時，用戶點擊其他任何地方其他比鍵盤每當鍵盤是可見的，不要忘了導入

var dismissKeyboard = require('dismissKeyboard');

此外，有幾個可能的解決方法。使用keyboardWillShow和keyboardWillHide方法設置和取消設置狀態變量，如isKeyboardVisible = true。此外，基於此狀態變量，如果爲true，則使用絕對座標（從高度0到屏幕高度 - keyboardheight）在整個屏幕（透明TouchableHighlight或TouchableWithoutFeedback）上繪製覆蓋圖，並在點擊時調用相同的dismisskeyboard（）方法。

喜歡的東西

componentWillMount() { 
    if (Platform.OS === 'ios') { 
     Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); //not supported on Android 
     Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); //not supported on Android 
    } 
    else { 
     Keyboard.addListener('keyboardDidShow', this.keyboardWillShowAndroid); 
     Keyboard.addListener('keyboardDidHide', this.keyboardWillHideAndroid); 
    } 
} 
keyboardWillShow (e) { 
    let newSize = e.endCoordinates.height 
    this.setState({ 
     keyboardHeight: newSize, 
     isKeyboardVisible: true 
    }) 
    } 
keyboardWillHide (e) { 
    this.setState({ 
     keyboardHeight: 0, 
     isKeyboardVisible: false 
    }) 
    }

你可以得到屏幕高度這樣

import Dimensions from 'Dimensions'; 
var height = Dimensions.get('window').height; 
    var width = Dimensions.get('window').width;

在這裏，您可以呈現在你的UI透明的可觸摸組件只當鍵盤是可見的，並關閉鍵盤在onPress方法。

來源

2016-12-29 13:55:39

dismisskeboard nolonger的作品，它已被棄用 –

Keyboard.dismiss（）可用來代替。 –

@AhmedAli另外，你能否提供表示已折舊的鏈接？這個對我有用。 –

這裏的解決方案是用<ScrollView keyboardShouldPersistTaps="handled" />包裹你的表單。 keyboardShouldPersistTaps是重要組成部分。它也可以是「從不」爲keyboardShouldPersistTaps，但隨後鍵盤可能會輕易解散。此解決方案共享於https://stackoverflow.com/a/41429871/1828637

來源

2018-01-13 17:25:00 Noitidart

React-native解除鍵盤當焦點/點擊其他地方，在文本框外

回答

相關問題