प्रतिक्रिया-मूल में कीबोर्ड छिपाएं

448

यदि मैं एक टेक्स्टिनपुट पर टैप करता हूं, तो मैं कीबोर्ड को फिर से खारिज करने के लिए कहीं और टैप करने में सक्षम होना चाहता हूं (हालांकि वापसी कुंजी नहीं)। मुझे उन सभी ट्यूटोरियल और ब्लॉग पोस्टों में इस बारे में थोड़ी जानकारी नहीं मिली, जो मैंने पढ़े हैं।

यह मूल उदाहरण अभी भी मेरे लिए प्रतिक्रिया-देशी 0.4.2 सिम्युलेटर में काम नहीं कर रहा है। अभी तक अपने iPhone पर यह कोशिश नहीं कर सका।

<View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.ios.js
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
    <TextInput
      style={{height: 40, borderColor: 'gray', borderWidth: 1}}
      onEndEditing={this.clearFocus}
    />
  </View>
react-native 
— TurboFish
स्रोत
3
कलंक की कोशिश करो (): github.com/facebook/react-native/issues/113
— हर्बर्ट डी
सही उत्तर यह होना चाहिए कि नीचे एरिक किम से। स्क्रॉलव्यू उत्तर (गलत पर स्क्रॉल करने योग्य सेट करें) आदर्श नहीं है, यदि आपके पास कई टेक्स्ट इनपुट हैं तो यह आपको टेक्स्ट इनपुट से टेक्स्ट इनपुट से कीबोर्ड के बिना खारिज होने की उम्मीद नहीं करता है।
— हिप्पोफ्लाफ
2
जो लोग पूरे एप्लिकेशन देख @ नीचे Scottmas के जवाब के लिए एक समाधान चाहते हैं (लिंक:। Stackoverflow.com/a/49825223/1138273 )
— हामेद

जवाबों:

563

यदि आपके पास keyboardType='numeric'कोई समस्या नहीं है , तो कीबोर्ड को खारिज करने की समस्या और अधिक गंभीर हो जाती है , क्योंकि इसे खारिज करने का कोई तरीका नहीं है।

स्क्रॉलव्यू के साथ दृश्य को बदलना एक सही समाधान नहीं है, जैसे कि आपके पास कई textInputएस या buttonएस हैं, उन पर टैप करते समय कीबोर्ड ऊपर है केवल कीबोर्ड को खारिज कर देगा।

सही तरीका यह है कि देखें TouchableWithoutFeedbackऔर कॉल करेंKeyboard.dismiss()

संपादित करें: अब आप उपयोग कर सकते हैं ScrollViewके साथ keyboardShouldPersistTaps='handled'करने के लिए केवल कीबोर्ड ख़ारिज जब नल बच्चों द्वारा नियंत्रित नहीं कर रहा है (यानी अन्य textInputs या बटन टैप।)

यदि आपके पास है

<View style={{flex: 1}}>
    <TextInput keyboardType='numeric'/>
</View>

इसे बदलें

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

या

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

संपादित करें: आप कीबोर्ड को खारिज करने के लिए एक उच्च आदेश घटक भी बना सकते हैं।

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';

const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
const DismissKeyboardView = DismissKeyboardHOC(View)

बस इसे इस तरह से उपयोग करें

...
render() {
    <DismissKeyboardView>
        <TextInput keyboardType='numeric'/>
    </DismissKeyboardView>
}

नोट: accessible={false}इनपुट फॉर्म वॉयसओवर के माध्यम से सुलभ होना जारी रखने के लिए आवश्यक है। दृष्टिबाधित लोग आपको धन्यवाद देंगे!

— एरिक किम
स्रोत
28
यह महान है, मेरे पास एकमात्र टिप्पणी यह ​​है कि आप आरएन में आधिकारिक कीबोर्ड एपीआई का उपयोग कर सकते थे, और कुछ आरएन आंतरिक उपयोगिता बर्खास्तगीबोर्ड () को कॉल करने के बजाय Keyboard.dismiss () कहा जाता था। लेकिन दोनों वर्तमान में ठीक काम करते हैं।
— पावेल लेसिक
@PavleLekic देरी के लिए क्षमा करें, मैंने HOC पद्धति के साथ उत्तर को अपडेट किया
— एरिक किम
3
यह बहुत अच्छा काम करता है। मुझे तीर फ़ंक्शन की परिभाषा के लिए वाक्यविन्यास को थोड़ा बदलना पड़ा, RN में अप्रत्याशित टोकन त्रुटि को दूर करने के लिए: const DismissKeyboardHOC = (Comp) => {
— jwinn
2
मैं नहीं मिल सकता है onPressके लिए TouchableWithoutFeedbackआग में कोई फर्क नहीं पड़ता कि मैं क्या करने की कोशिश
— ब्रैड रयान
1
एक HoC क्यों बनाएं और इसे अपने ऐप ट्री की जड़ में जोड़ें /
— दिमित्री कोपरिवा
248

यह सिर्फ अद्यतन और प्रलेखित है ! और कोई छुपी हुई तरकीब नहीं।

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

https://github.com/facebook/react-native/pull/9925

— गेंट लेबोर्डे
स्रोत
4
इसे जोड़ने के लिए धन्यवाद। मुझे आशा है कि आपका उत्तर शीर्ष पर होगा। मैंने लगभग इसे याद किया और एक पुराने समाधान का इस्तेमाल किया।
— भेड़चाल
2
सही उत्तर के रूप में इसे बदलने के लिए @MrMuetze को पिंग करना
— jehna1
8
इसे सर्वश्रेष्ठ उत्तर के रूप में नहीं चुना जाना चाहिए। सवाल पूछता है कि कीबोर्ड को बाहर निकालने के लिए कैसे टैप करें। यह उत्तर बस ऐसा करने के लिए एक एपीआई प्रदान करता है, जबकि वास्तविक सबसे अच्छा जवाब एक व्यावहारिक कार्यान्वयन प्रदान करता है।
— jskidd3
आप अगली लाइब्रेरी का उपयोग कर सकते हैं: KeyboardAwareScrollView
— एलेजांद्रो गोंजालेज
97

कस्टम बर्खास्तगी के लिए इसका उपयोग करें

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback 
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})
— syarul
स्रोत
यह प्रलेखित नहीं है, लेकिन प्रतिक्रिया-मूल जीथुब रेपो में नमूने कुछ बार इसका उपयोग करते हैं।
— सियारुल
7
दिलचस्प है, उन उत्सुक लोगों के लिए जहां से यह आता है, यह रिएक्ट नेटिव में एक उपयोगिता पुस्तकालय है। यहाँ स्रोत है: github.com/facebook/react-native/blob/master/Lbooks/…
— जोशुआ पिंटर
1
किसी कारण यह काम नहीं किया, जब मैं के साथ की कोशिश की के लिएreact-native-search-bar
— पीटर जी
यह Keyboard.dismiss के सटीक समकक्ष है, जो प्रलेखित होने के बाद से बेहतर है। github.com/facebook/react-native/blob/…
— रिकार्डो स्टुवेन
88

रिएक्ट नेटिव का प्रयोग करें Keyboard.dismiss()

अद्यतन उत्तर

प्रतिक्रियाशील मूल ने स्थैतिक dismiss()विधि को उजागर किया Keyboard, इसलिए अद्यतन विधि है:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

मूल उत्तर

रिएक्ट नेटिव dismissKeyboardलाइब्रेरी का उपयोग करें ।

मुझे एक समान समस्या थी और मुझे लगा कि मैं केवल एक ही था जो इसे नहीं मिला।

ScrollViews

यदि आपके पास एक ScrollView, या कुछ भी है जो इसे से विरासत में मिला है ListView, तो आप एक प्रोप जोड़ सकते हैं जो स्वचालित रूप से प्रेस या ड्रैगिंग घटनाओं के आधार पर कीबोर्ड को खारिज कर देगा।

प्रोप है keyboardDismissModeऔर इसका मान हो सकता है none, interactiveया on-drag। आप यहाँ पर अधिक पढ़ सकते हैं ।

नियमित दृश्य

यदि आपके पास के अलावा कुछ है ScrollViewऔर आप कीबोर्ड को खारिज करने के लिए किसी भी प्रेस को पसंद करते हैं, तो आप एक साधारण का उपयोग कर सकते हैं TouchableWithoutFeedbackऔर आपके लिए कीबोर्ड को खारिज करने के onPressलिए रिएक्ट नेटिव की उपयोगिता लाइब्रेरी dismissKeyboardका उपयोग कर सकते हैं ।

आपके उदाहरण में, आप कुछ ऐसा कर सकते हैं: 

var DismissKeyboard = require('dismissKeyboard'); // Require React Native's utility library.

// Wrap your view with a TouchableWithoutFeedback component like so.

<View style={styles.container}>

  <TouchableWithoutFeedback onPress={ () => { DismissKeyboard() } }>

    <View>

      <Text style={styles.welcome}>
        Welcome to React Native!
      </Text>

      <Text style={styles.instructions}>
        To get started, edit index.ios.js
      </Text>

      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>

      <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />

    </View>

  </TouchableWithoutFeedback>

</View>

ध्यान दें: TouchableWithoutFeedbackकेवल एक ही बच्चा हो सकता है, इसलिए आपको Viewऊपर दिखाए गए अनुसार एकल में इसके नीचे सब कुछ लपेटने की आवश्यकता है ।

— जोशुआ पिंटर
स्रोत
4
React Native dismiss()ने कीबोर्ड पर स्थिर विधि को उजागर किया , इसलिए अद्यतन विधि है import { Keyboard } from 'react-native'; Keyboard.dismiss():।
— जोशुआ पिंटर
1
मेरे पास एक कीबोर्ड है जो तब से लटका हुआ है जब मैंने एक इनपुट फ़ील्ड पर ध्यान केंद्रित करते हुए पुनः लोड किया था। इस मामले Keyboard.dismiss()में कुछ भी नहीं है क्योंकि इसके कार्यान्वयन एक इनपुट पर केंद्रित होने पर निर्भर है, जो अब मैं नहीं हूं।
— पैंशन
@pstanton कीबोर्ड को खारिज करने के लिए आपको क्या करना था, फिर?
— जोशुआ पिंटर
कोई रास्ता नहीं था मुझे मिल सकता है, इसलिए मैं बंद कर दिया!
— पैंशनटन
41

सरल उत्तर यह है कि दृश्य के बजाय स्क्रॉल दृश्य का उपयोग करें और स्क्रॉल करने योग्य संपत्ति को झूठी पर सेट करें (हालांकि कुछ स्टाइल को समायोजित करने की आवश्यकता हो सकती है)।

इस तरह, कीबोर्ड उस क्षण को खारिज कर देता है जिसे मैं कहीं और टैप करता हूं। यह प्रतिक्रिया-मूल के साथ एक समस्या हो सकती है, लेकिन टैप ईवेंट केवल स्क्रॉलव्यू के साथ संभाला हुआ प्रतीत होता है जो वर्णित व्यवहार की ओर ले जाता है।

संपादित करें: jllodra के लिए धन्यवाद। कृपया ध्यान दें कि यदि आप सीधे किसी अन्य Textinput में टैप करते हैं और फिर बाहर, कीबोर्ड अभी भी छिपा नहीं होगा।

— TurboFish
स्रोत
1
यह स्क्रॉलव्यू के साथ काम करता है, लेकिन फिर भी कुछ ऐसे मामले हैं जो मुझे अनुभव हो रहे हैं कि मैं नाविक और कीबोर्ड का उपयोग करके दृश्य को बदलने के लिए बटन पर क्लिक कर सकता हूं फिर भी नीचे की तरफ चिपक जाता है और इसे बंद करने के लिए मैन्युअल रूप से वापसी कुंजी पर क्लिक करना होगा :(
— पीयूष चौहान
1
जब आप TextInput के बाहर टैप करते हैं, तो कीबोर्ड छुपाता है, लेकिन यदि (बाहर टैप करने के बजाय) आप किसी अन्य TextInput में टैप करते हैं, और अंत में बाहर टैप करते हैं, तो कीबोर्ड छिपाता नहीं है। 0.6.0 पर परीक्षण किया गया।
— जलोदा
मैं अब अलग व्यवहार देख रहा हूं। TextInput के बाहर टैपिंग कीबोर्ड को छुपाता है, भले ही मैं सीधे किसी अन्य TextInput पर टैप करता हो - जो एक समस्या है क्योंकि आपको इसे टाइप करने में सक्षम होने के लिए किसी अन्य TextInput पर दो बार टैप करना होगा! आह। (आरएन 0.19 के साथ)
— लेन रेटिग
1
आप सच में स्क्रॉल करने योग्य सेट कर सकते हैं और कीबोर्ड का उपयोग कर सकते हैं ShhouldPersistTaps = {'handled'} और keyboardDismissMode = {'on-drag'} समान प्रभाव प्राप्त करने के लिए
— Eric Wiener
केवल स्क्रॉलव्यू ने मेरे लिए काम किया, मुझे पता नहीं क्यों, एक कीबोर्ड के इनपुट को खारिज करने पर स्वीकृत उत्तर
— यवन हुइन्ह
33

आप नीचे दिए गए प्रतिक्रिया-मूल से आयात कर सकते हैं:keyboard

import { Keyboard } from 'react-native';

और आपके कोड में कुछ इस तरह हो सकता है:

render() {
    return (
      <TextInput
        onSubmit={Keyboard.dismiss}
      />
    );
  }

स्थैतिक खारिज ()

सक्रिय कीबोर्ड को खारिज करता है और फोकस हटाता है।

— एलिरेज़ा
स्रोत
मुझे जरूरत नहीं थी static dismiss()। मैंने सिर्फ Keyboard.dismiss()अपनी ऑनसुमिट विधि (जहांonSubmitEditing={() => {this.onSubmit()}})
— शेरलहमन
30

मैं रिएक्ट के लिए बिल्कुल नया हूं, और डेमो ऐप बनाते समय ठीक उसी मुद्दे पर चला गया हूं। यदि आप onStartShouldSetResponderप्रोप ( यहां वर्णित ) का उपयोग करते हैं , तो आप एक पुराने पर छू सकते हैं React.View। इस रणनीति पर अधिक अनुभवी प्रतिक्रिया-ers के विचार सुनने के लिए उत्सुक / यदि कोई बेहतर है, लेकिन यह मेरे लिए काम कर रहा है:

containerTouched(event) {
  this.refs.textInput.blur();
  return false;
}

render() {
  <View onStartShouldSetResponder={this.containerTouched.bind(this)}>
    <TextInput ref='textInput' />
  </View>
}

2 बातें यहाँ ध्यान दें पहले, जैसा कि यहां चर्चा की गई है , अभी तक सभी साक्षात्कारों के संपादन को समाप्त करने का एक तरीका नहीं है, इसलिए हमें TextInputइसे धुंधला करने के लिए सीधे संदर्भित करना होगा। दूसरा, इसके onStartShouldSetResponderशीर्ष पर अन्य छूने योग्य नियंत्रणों द्वारा अवरोधन किया जाता है। इसलिए कंटेनर दृश्य के भीतर TouchableHighlightएक (अन्य सहित TextInput) पर क्लिक करने से ईवेंट ट्रिगर नहीं होगा । हालाँकि, Imageकंटेनर दृश्य के भीतर क्लिक करने पर भी कीबोर्ड को खारिज कर दिया जाएगा।

— hunteros
स्रोत
यह निश्चित रूप से काम करता है। लेकिन जैसा कि आपने कहा, Im उत्सुक है अगर यह सही तरीका है। आशा है कि वे इसे जल्द ही हल करेंगे ( github.com/facebook/react-native/issues/113 )
— mutp
महान यह मेरे लिए काम किया। मेरे स्क्रॉल दृश्य स्पर्श करने योग्य तरीकों से काम नहीं कर रहे थे! धन्यवाद!
— जेम्स ट्रिक
24

के ScrollViewबजाय का उपयोग करें Viewऔर keyboardShouldPersistTapsझूठी विशेषता सेट करें ।

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>
— टायलर मैकगिनिस
स्रोत
प्रलेखन के अनुसार, keyboardShouldPersistTapsए का उपयोग करते समय विशेषता झूठे को परिभाषित करती है ScrollView। मैंने अभी हाल के संस्करण के लिए अपनी प्रतिक्रिया-मूल को अद्यतन किया और एक दूसरे पर स्विच करने की समस्या TextInputअभी भी बनी हुई है। कीबोर्ड तब खारिज करने योग्य नहीं है। क्या आपको इस विशिष्ट समस्या का हल मिल गया है?
— टर्बोफिश
1
डॉक्स गलत थे, लेकिन अब अपडेट कर दिए गए हैं, इस PR को देखें: github.com/facebook/react-native/issues/2150
— Ryan McDermott
क्या करता keyboardShouldPersistTapsहै? यहाँ प्रासंगिक क्यों है? धन्यवाद
— लेन RETTIG
1
चेतावनी: 'KeyboardShouldPersistTaps = {false}' को हटा दिया गया है। इसके बजाय 'keyboardShouldPersistTaps = "never" का प्रयोग करें
— मिलान राकोस
13

अगर किसी को एक बहुस्तरीय पाठ इनपुट को खारिज करने के कार्यशील उदाहरण की आवश्यकता है तो यहां जाएं! आशा है कि यह कुछ लोगों को वहाँ से बाहर निकलने में मदद करता है, डॉक्स एक बहुस्तरीय इनपुट को खारिज करने का एक तरीका नहीं बताते हैं, कम से कम यह कैसे करना है पर कोई विशेष संदर्भ नहीं था। स्टैक पर वास्तव में यहां पोस्ट करने के लिए एक noob, अगर किसी को लगता है कि यह वास्तविक पोस्ट के लिए एक संदर्भ होना चाहिए यह स्निपेट मुझे बताने के लिए लिखा गया था। 

import React, { Component } from 'react'
import {
  Keyboard,
  TextInput,
  TouchableOpacity,
  View,
  KeyboardAvoidingView,
} 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: '#000000',
                paddingLeft: 15,
                paddingTop: 10,
                fontSize: 18,
              }}
              multiline={true}
              textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }}
              placeholder="Share your Success..."
              value={this.state.text}
              underlineColorAndroid="transparent"
              returnKeyType={'default'}
            />
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    )
  }
}
— ऑस्टिन रेनॉल्ड्स
स्रोत
11

के अपडेट किया गया उपयोग ScrollViewके लिएReact Native 0.39

<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} />

हालांकि, अभी भी दो TextInputबक्से के साथ एक समस्या है । जैसे। इनपुट्स के बीच स्विच करने पर एक उपयोगकर्ता नाम और पासवर्ड फॉर्म अब कीबोर्ड को खारिज कर देगा। TextInputsएक का उपयोग करते समय बीच में स्विच करते समय कीबोर्ड को जीवित रखने के लिए कुछ सुझाव प्राप्त करना पसंद करेंगे ScrollView।

— अंशुल कोका
स्रोत
3
ऐसा नहीं है कि प्रतीत होता है 0.40अद्यतन keyboardShouldPersistTapsएक से booleanएक के लिए enum'handled` के संभावित मूल्य जो इसे ठीक करने के लिए लगता है के साथ।
— अंशुल कोका
11

कुछ तरीके हैं, यदि आप घटना का नियंत्रण onPressकरते हैं जैसे आप उपयोग कर सकते हैं:

import { Keyboard } from 'react-native'

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

यदि आप कीबोर्ड को बंद करना चाहते हैं तो स्क्रॉलिंग का उपयोग करें:

<ScrollView keyboardDismissMode={'on-drag'}>
     //content
</ScrollView>

अधिक विकल्प तब होता है जब उपयोगकर्ता कीबोर्ड के बाहर क्लिक करता है:

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}}>
    //inputs and other content
</KeyboardAvoidingView>
— Idan
स्रोत
1
दोस्तों, सवाल अभी भी वास्तविक है लेकिन सवाल 4 साल पुराना है (2019 का अंत अब)। आरएन अब सू सरल और प्रयोग करने में आसान है। हमें इस प्रश्न के समाधान के लिए सभी क्षमताओं की समीक्षा करनी होगी। इस टिप्पणी को आगे बढ़ाएं!
— लिंक
@ धन्यवाद हाय! मैं बिल्कुल सहमत हूँ
— इदं
10 
const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

दृष्टिकोण नंबर # 2;

इसे इंगित करने के लिए उपयोगकर्ता @ ricardo-stuven के लिए धन्यवाद, कीबोर्ड को खारिज करने का एक और बेहतर तरीका है जिसे आप उदाहरण में देख सकते हैं प्रतिक्रिया देशी डॉक्स।

साधारण आयात Keyboardऔर इसे विधि कहते हैंdismiss()

— अदील इमरान
स्रोत
1
यह Keyboard.dismiss के सटीक समकक्ष है, जो प्रलेखित होने के बाद से बेहतर है। github.com/facebook/react-native/blob/…
— रिकार्डो स्ट्वेन
जिस समय मैंने यह उत्तर दिया, यह दस्तावेज नहीं था। इसका उल्लेख करने के लिए धन्यवाद। मैं अपना जवाब अपडेट करूंगा।
— अदील इमरान
10

अपने घटकों को लपेटने से TouchableWithoutFeedbackकुछ अजीब स्क्रॉल व्यवहार और अन्य समस्याएं हो सकती हैं। मैं भरी हुई संपत्ति के Viewसाथ अपने सबसे ऊपरी ऐप को लपेटना पसंद करता हूं onStartShouldSetResponder। यह मुझे सभी अखंडित हैंडल को संभालने और फिर कीबोर्ड को खारिज करने की अनुमति देगा। महत्वपूर्ण रूप से, चूंकि हैंडलर फ़ंक्शन गलत है, स्पर्श घटना सामान्य की तरह प्रचारित होती है।

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }
— Scottmas
स्रोत
आपके उत्तर के लिए धन्यवाद @Scottmas। मैंने आपके "अजीब स्क्रॉल व्यवहार और अन्य मुद्दों" टिप्पणी के कारण, TouchableWithoutFeedback के बजाय इसका उपयोग करना समाप्त कर दिया। लेकिन अगर मैं आँख बंद करके आपके शब्दों पर भरोसा नहीं कर रहा था, तो क्या आप अपनी टिप्पणी पर विस्तार से बता सकते हैं? :)
— कुहर
8

मैंने अभी हाल के रिएक्ट नेटिव संस्करण (0.4.2) का उपयोग करके यह परीक्षण किया है, और जब आप कहीं और टैप करते हैं तो कीबोर्ड को खारिज कर दिया जाता है।

और FYI करें: आप उस कॉलबैक फ़ंक्शन को सेट कर सकते हैं जब आप कीबोर्ड को "ऑनएंड एडिटिंग" प्रोप से असाइन करके खारिज कर देते हैं।

— जोनाथन हुआंग
स्रोत
मैं "onEndEditing" कॉलबैक पर डिबगिंग कर रहा था, लेकिन यह पहले कभी ट्रिगर नहीं हुआ; मैं प्रतिक्रिया के मूल संस्करण के साथ इसे देखने जा रहा हूँ, आपके सुझाव के लिए धन्यवाद
— TurboFish
7

अगर मैं प्रतिक्रियाशील मूल के नवीनतम संस्करण को गलत नहीं कर रहा हूं तो कीबोर्ड को टैप करके खारिज करने में सक्षम होने के इस मुद्दे को हल किया है।

— christopherdro
स्रोत
4
क्या आप यह बता पाएंगे कि उनके कोड / डॉक में से कौन सा हिस्सा ऐसा करता है? मैं एक ही मुद्दे में चल रहा हूं, और मैं वास्तव में इसकी सराहना करते हुए मुझे दिशा की ओर इशारा करता हूं :)
— ओकाजाकी मियामा युता
पुष्टि की कि यह अभी भी RN 0.19 (नवीनतम) के रूप में एक मुद्दा है।
— 22
RN 0.28 के साथ अभी भी एक मुद्दा है
— हिप्पोफ्लफ
7

कैसे के आसपास / के आसपास एक अछूत घटक रखने के बारे में TextInput?

var INPUTREF = 'MyTextInput';

class TestKb extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}>
                <View>
                    <TextInput ref={'MyTextInput'}
                        style={{
                            height: 40,
                            borderWidth: 1,
                            backgroundColor: 'grey'
                        }} ></TextInput>
                </View>
                <TouchableWithoutFeedback onPress={() => this.refs[INPUTREF].blur()}>
                    <View 
                        style={{ 
                            flex: 1, 
                            flexDirection: 'column', 
                            backgroundColor: 'green' 
                        }} 
                    />
                </TouchableWithoutFeedback>
            </View>
        )
    }
}
— boredgames
स्रोत
4

कीबोर्ड घटनाओं को नियंत्रित करने के लिए कीबोर्ड मॉड्यूल का उपयोग किया जाता है।

  • import { Keyboard } from 'react-native'

  • रेंडर विधि में नीचे कोड जोड़ें।

    render() { return <TextInput onSubmitEditing={Keyboard.dismiss} />; }

आप उपयोग कर सकते हैं -

Keyboard.dismiss()

स्थैतिक बर्खास्तगी () सक्रिय कीबोर्ड को खारिज करता है और मूल दस्तावेजों के अनुसार फ़ोकस हटाता है।

— अभिनंदन शर्मा
स्रोत
3

पहले आयात कीबोर्ड

import { Keyboard } from 'react-native'

फिर अपने अंदर TextInputआप जोड़ना Keyboard.dismissको onSubmitEditingप्रोप। आपके पास कुछ ऐसा होना चाहिए जो इस तरह दिखे:

render(){
  return(
    <View>
      <TextInput 
        onSubmitEditing={Keyboard.dismiss}
       />
    </View>
  )  
}
— नागेन्द्र क्र।
स्रोत
1
अधिक संदर्भ अच्छा होगा।
— कोलीड्रे
2

का प्रयोग keyboardShouldPersistTapsमें ScrollViewआप में "संभाला" है, जो मुद्दों के साथ सौदों है कि लोगों को कह रहे हैं पारित कर सकते हैं scrollview का उपयोग कर के साथ आता है। यह वही है जो प्रलेखन 'संभाला' का उपयोग करने के बारे में कहता है: the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). यहां वह है जहां इसे संदर्भित किया गया है।

— शमूएल
स्रोत
यह मेरे लिए काम किया! (हालाँकि मुझे इसे अपने 3rd पार्टी लाइब्रेरी के अंदर जोड़ना था react-native-keyboard-aware-scroll-view)।
— निक ग्रीली
1

में ScrollViewउपयोग

keyboardShouldPersistTaps="handled"

यह आपका काम करेगा।

— gamingumar
स्रोत
1

ऐसे कई तरीके हैं जिनसे आप इसे संभाल सकते हैं, ऊपर दिए गए उत्तर शामिल नहीं हैं returnTypeक्योंकि यह उस समय प्रतिक्रिया-मूल में शामिल नहीं था।

1: आप स्क्रॉलव्यू के अंदर अपने घटकों को लपेटकर इसे हल कर सकते हैं, डिफ़ॉल्ट रूप से स्क्रॉलबोर्ड कीबोर्ड को बंद कर देता है यदि हम कहीं दबाते हैं। लेकिन अगर आप स्क्रॉलव्यू का उपयोग करना चाहते हैं, लेकिन इस प्रभाव को निष्क्रिय कर दें। आप स्क्रॉल दृश्य में पॉइंटरइवेंट प्रॉप का उपयोग कर सकते हैं pointerEvents = 'none'।

2: यदि आप एक बटन दबाने पर कीबोर्ड बंद करना चाहते हैं, तुम बस का उपयोग कर सकते Keyboardसेreact-native

import { Keyboard } from 'react-native' and inside onPress of that button, you can useKeyboard.dismiss () '।

3: कीबोर्ड पर रिटर्न की क्लिक करने पर आप कीबोर्ड को बंद भी कर सकते हैं, नोट: यदि आपका कीबोर्ड प्रकार संख्यात्मक है, तो आपके पास रिटर्न कुंजी नहीं होगी। तो, आप इसे एक प्रोप, returnKeyType देकर इसे सक्षम कर सकते हैं done। या आप उपयोग कर सकते हैं onSubmitEditing={Keyboard.dismiss}, इसे कॉल किया जाता है जब भी हम रिटर्न कुंजी दबाते हैं। और यदि आप फोकस खोते समय कीबोर्ड को खारिज करना चाहते हैं, तो आप onll प्रोप का उपयोग कर सकते हैं,onBlur = {Keyboard.dismiss}

— सरमद शाह
स्रोत
0

Keyboard.dismiss()करूंगा। लेकिन कभी-कभी यह फ़ोकस खो सकता है और कीबोर्ड रेफ को खोजने में असमर्थ होगा। करने के लिए सबसे सुसंगत तरीका ref=_reftextInput के लिए डाल दिया है , और _ref.blur()जब आप को खारिज करने की जरूरत है, और _ref.focus()जब आप कीबोर्ड को वापस लाने की जरूरत है।

— ब्रूस जिंदा लिन
स्रोत
0

बाहर की कोशिश करो keyboard.dismiss()। इसने मेरे लिए काम किया

— Amoli
स्रोत
0

यहाँ कीबोर्ड समाधान के लिए मेरा समाधान है और TextInput टेप करने के लिए स्क्रॉल (मैं KeyboardDismissMode प्रोप के साथ स्क्रॉल दृश्य का उपयोग कर रहा हूँ):

import React from 'react';
import {
  Platform,
  KeyboardAvoidingView,
  ScrollView
} from 'react-native';

const DismissKeyboard = ({ children }) => {
  const isAndroid = Platform.OS === 'android';
  const behavior = isAndroid ? false : 'padding';

  return (
    <KeyboardAvoidingView
      enabled
      behavior={ behavior }
      style={{ flex: 1}}
    >
      <ScrollView
        keyboardShouldPersistTaps={'always'}
        keyboardDismissMode={'on-drag'}
      >
        { children }
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default DismissKeyboard;

उपयोग: 

render(){
   return(
     <DismissKeyboard>
       <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
     </DismissKeyboard>
   );
}
— अर्टेम शेवतोव
स्रोत
0

इस पैकेज का उपयोग करें react-native-keyboard-aware-scroll-view

अपने मूल घटक के रूप में उस घटक का उपयोग करें

चूँकि इस पैकेज react-native-keyboard-aware-scroll-viewमें एक स्क्रॉल दृश्य भी है, इसलिए आपको इसे इसमें जोड़ना होगा:

<KeyboardAwareScrollView keyboardShouldPersistTaps="handled"> <ScrollView keyboardShouldPersistTaps="handled"></ScrollView> </KeyboardAwareScrollView>

— साइरस ज़ी
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.