प्रतिक्रिया मूल में मल्टीलाइन टेक्स्ट इनपुट में कीबोर्ड को खारिज करें

Question

जब उपयोगकर्ता मल्टीलाइन टेक्स्ट इनपुट में रिटर्न कुंजी दबाता है, तो एक नई लाइन बनाई जाती है और कीबोर्ड दिखाई देता है। प्रतिक्रिया मूल में multiline TextInput के लिए कीबोर्ड को कैसे खारिज कर दिया जाना चाहिए?

मैंने कुछ शोध किया। मैंने पाया कि TextInput के बाहर दृश्य पर क्लिक करने से TextInput को धुंधला नहीं किया जाता है, जिससे कुंजीपटल दिखाई दे रहा है?

<View style={styles.container}> 
    <TextInput 
    placeholder="To" 
    style={styles.input} 
    value={this.state.to} 
    onChangeText={(to) => this.setState({to})} 
    /> 
    <TextInput 
    placeholder="Text" 
    style={styles.textarea} 
    multiline={true} 
    numberOfLines={4} 
    value={this.state.text} 
    onChangeText={(text) => this.setState({text})} 
    /> 
</View> 

scrollview लिए, वहाँ एक प्रोप है - keyboardShouldPersistTaps जो TextInput धुंधला करने के लिए कारण बनता है। क्या दृश्य के लिए इसका कोई समकक्ष है? मैं मल्टीलाइन टेक्स्ट इनपुट को धुंधला करना चाहता हूं ताकि कीबोर्ड खारिज हो जाए।

Answer 1

TextInput में blurOnSubmit प्रोप है; जब सत्य पर सेट किया जाता है, तो रिटर्न कुंजी कुंजीपटल को खारिज कर देती है।

हालांकि वर्तमान में प्रोप एंड्रॉइड पर काम नहीं करता है। मैं इस विषय पर एक मुद्दा पोस्ट किया है: https://github.com/facebook/react-native/issues/8778

Answer 2

returnKeyType के बारे में मेरी टिप्पणी को पूरा करने के लिए, आपको blurOnSubmit={true} सेट करने की भी आवश्यकता है जो onSubmitEditing ईवेंट हैंडलर को टोन दबाए जाने पर भी ट्रिगर करेगा।

विवरण के लिए उदाहरण https://rnplay.org/apps/0HIrmw देखें।

Answer 3

कुछ घंटों के लिए और लगभग नगण्य है और कुछ गूंगा भाग्य अंत में पता लगा कि कैसे TextInput बस टेक्स्ट बॉक्स के बाहर स्पर्श करके खारिज एक बहु बनाने के लिए करने के बाद इस के खिलाफ मेरे सिर टकरा । ya'll के लिए लिटिल उदाहरण उम्मीद है कि किसी और को इस उपयोगी पाता है क्योंकि दस्तावेज़ को यह सब स्पष्ट हो गया कि आप Multilines आसानी से खारिज करने के लिए प्राप्त कर सकते हैं नहीं है ...

import React, { Component} from 'react'` 
import { 
keyboardAvoidingView, 
Keyboard, 
StatusBar, 
StyleSheet, 
TextInput, 
View, 
} from 'react-native'; 

class App extends Component { 
constructor(props){ 
super(props) 
this.state ={ 
     behavior: 'position', 
} 
this._keyboardDismiss = this._keyboardDismiss.bind(this); 
} 
componentWillMount() { 
this.keyboardDidHideListener = 
        Keyboard 
       .addListener('keyboardDidHide',this._keyboardDidHide);               
       } 

componentWillUnmount(){ 
this.keyboardDidHideListener.remove(); 
} 

_keyboardDidHide() { 
Keyboard.dismiss(); 
} 

render() { 

return (
    <KeyboardAvoidingView 
     style{{flex:1}} 
     behavior={this.state.behavior} 
    > 
    <TouchableOpacity 
     onPress={this._keyboardDidHide} 
    > 
    <View> 
     <TextInput 
      style={ 
      color: '#000', 
      paddingLeft: 15, 
      paddingTop: 10, 
      fontSize: 18,t} 
      multiline={true} 
      textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }} 
      placeholder="Share your Success..." 
      value={this.state.text} 
      underlineColorAndroid="transparent" 
      returnKeyType={'default'} 
     /> 
    </View> 
    </TouchableOpacity> 

    </KeyboardAvoidingView> 
); 
} 
} 

Answer 4

यह ऑस्टिन के लिए बहुत उपयोगी जवाब का एक सरलीकृत संस्करण है ऊपर।

आप के साथ एक TouchableOpacity में अपनी स्क्रीन/घटक के लिए देखें आप परिवर्तित तो activeOpacity = {1} (यह किसी भी लुप्त होती या अस्पष्टता प्रभाव को रोकता है), तो आप इसे पारित कर सकते हैं:

onPress={() => Keyboard.dismiss()} 

सुनिश्चित करें आपने 'प्रतिक्रिया-मूल' से टच करने योग्य अस्पष्टता और कीबोर्ड आयात किया है और आप अच्छे हैं।