প্রতিক্রিয়া-স্থানীয় মধ্যে কীবোর্ড লুকান

448

আমি যদি কোনও পাঠ্যপিন্টে আলতো চাপছি তবে কীবোর্ডটি আবার বরখাস্ত করার জন্য আমি অন্য কোথাও ট্যাপ করতে সক্ষম হতে চাই (যদিও রিটার্ন কীটি নয়)। আমি যে সমস্ত টিউটোরিয়াল এবং ব্লগ পোস্ট পড়েছি তাতে এ সম্পর্কিত তথ্যের সামান্যতম অংশ আমি পাইনি।

এই বেসিক উদাহরণটি এখনও সিমুলেটারে 0.4.2-এর সাথে প্রতিক্রিয়া সহ আমার জন্য কাজ করছে না। এটি এখনও আমার আইফোনে চেষ্টা করতে পারেনি।

<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

— herbertD

সঠিক উত্তরটি নীচে এরিক কম থেকে হওয়া উচিত। স্ক্রোলভিউ উত্তর (মিথ্যাতে স্ক্রোলযোগ্য সেট করা) আদর্শ নয়, আপনার যদি একাধিক পাঠ্য ইনপুট থাকে তবে এটি আপনাকে কীবোর্ড খারিজ না করে পাঠ্য ইনপুট থেকে পাঠ্য ইনপুটটিতে যেতে দেয় না।

— হিপোফ্লুফ

2

যারা সমগ্র অ্যাপ্লিকেশানটি দেখতে @ নিচে Scottmas এর উত্তরের জন্য একটি সমাধান চান তাদের জন্য (লিঙ্ক। Stackoverflow.com/a/49825223/1138273 )

— হামেদ

561

কীবোর্ড খারিজ না করার সমস্যাটি যদি আপনার কাছে থাকে তবে তা আরও তীব্র keyboardType='numeric'হয়ে উঠবে, কারণ এটি খারিজ করার কোনও উপায় নেই।

স্ক্রোলভিউয়ের সাথে ভিউ প্রতিস্থাপন করা সঠিক সমাধান নয়, যেমন আপনার কাছে একাধিক textInputএস বা buttonগুলি রয়েছে, কীবোর্ডটি আপ থাকাকালীন সেগুলিতে আলতো চাপলেই কেবল কীবোর্ড খারিজ করা হবে।

সঠিক উপায় হ'ল ভিউকে সাথে TouchableWithoutFeedbackকল করা এবং কল করা apKeyboard.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

এটি দুর্দান্ত, আমার কাছে কেবলমাত্র মন্তব্যটি হ'ল আপনি আরএন-তে অফিশিয়াল কীবোর্ড এপিআই ব্যবহার করতে পারতেন এবং কিছু আরএন অভ্যন্তরীণ ইউটিলিটি বরখাস্তকিকেবোর্ড () পরিবর্তে কী-বোর্ড.ডিজমিস () নামে অভিহিত করতে পারতেন। তবে উভয়ই বর্তমানে ঠিকঠাক কাজ করে।

— পাভলে লেকিক

@ পাভেললিক বিলম্বের জন্য দুঃখিত, আমি এইচওসি পদ্ধতিটির সাথে উত্তরটি আপডেট করেছি

— এরিক কিম

3

এটি দুর্দান্ত কাজ করে। আমি তীর ফাংশনের সংজ্ঞা জন্য বাক্য গঠন একটু পরিবর্তন করতে আরএন একটি অপ্রত্যাশিত টোকেন ত্রুটি মুছে ফেলার জন্য ছিল: const DismissKeyboardHOC = (Comp) => {

— jwinn

2

আমি পেতে পারে না onPressজন্য TouchableWithoutFeedbackআগুন কোন ব্যাপার কি আমি চেষ্টা

— ব্র্যাড রায়ান

1

কেন একটি হউক তৈরি করুন এবং কেবল এটি আপনার অ্যাপ গাছের

— গোড়ায় যুক্ত করুন

248

এটি সবেমাত্র আপডেট হয়েছে এবং নথিভুক্ত হয়েছে ! আর কোনও লুকানো কৌশল নয়।

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

— গ্যান্ট লেবার্ড
সূত্র

4

এটি যুক্ত করার জন্য ধন্যবাদ। আমি আশা করি আপনার উত্তর উপরের দিকে বুদবুদ হবে। আমি এটি প্রায় মিস করেছি এবং একটি পুরানো সমাধান ব্যবহার করেছি।

— ভেড়াডগ

2

এটিকে সঠিক উত্তর হিসাবে পরিবর্তন করতে @ মিটারমুটেজে পিং করছেন

— jehna1

8

এটি সেরা উত্তর হিসাবে নির্বাচিত হওয়া উচিত নয়। প্রশ্নটি জিজ্ঞাসা করে যে এটির বাইরে ট্যাপ করার সময় কী-বোর্ড কীভাবে খারিজ করা যায়। এই উত্তরটি কেবল এমনটি করার জন্য একটি এপিআই সরবরাহ করে, যখন সত্যিকারের সেরা উত্তরটি কার্যকরভাবে কার্যকর করা যায়।

— jskidd3

আপনি পরবর্তী লাইব্রেরিটি ব্যবহার করতে পারেন: কীবোর্ডওয়্যারস্ক্রোলভিউ

— আলেজান্দ্রো গঞ্জালেজ

97

কাস্টম বরখাস্ত জন্য এটি ব্যবহার করুন

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback 
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})

— syarul
সূত্র

এটি নথিভুক্ত করা হয়নি, তবে দেশীয় গিথুব রেপোর প্রতিক্রিয়াগুলির নমুনাগুলি এটি কয়েকবার ব্যবহার করে।

— syarul

7

আকর্ষণীয়, যারা আগ্রহী তাদের জন্য যেখানে এটি এসেছে, এটি প্রতিক্রিয়া নেটিভের একটি ইউটিলিটি লাইব্রেরি। উত্সটি এখানে: github.com/facebook/react-native/blob/master/Libraries/…

— জোশুয়া পিন্টার

1

কোনও কারণে এটি কাজ করে না, যখন আমি চেষ্টা করেছিreact-native-search-bar

— পিটার জি।

এটি হ'ল কিবোর্ড.ডিজমিসের সমতুল্য সমতুল্য, যা নথিভুক্ত হওয়ার চেয়ে পছন্দনীয়। 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

প্রতিক্রিয়া দেশীয় উদ্ভাসিত স্ট্যাটিক dismiss()কীবোর্ডে পদ্ধতি, তাই আপডেট পদ্ধতি হল: import { Keyboard } from 'react-native'; Keyboard.dismiss()।

— জোশুয়া পিন্টার

1

আমার কাছে একটি কীবোর্ড রয়েছে যা একটি ইনপুট ক্ষেত্রের উপর ফোকাস করার সময় আমি পুনরায় লোড করানোর পরে ঝুলতে থাকি। এই ক্ষেত্রে Keyboard.dismiss()কিছুই করা যায় না কারণ এর বাস্তবায়ন কোনও ইনপুটকে কেন্দ্র করে কেন্দ্রীভূত হওয়ার উপর নির্ভরশীল, যা আমি আর করি না।

— pstanton

@pstanton কীবোর্ড খারিজ করতে আপনার কী করতে হবে, তাহলে?

— জোশুয়া পিন্টার

আমি খুঁজে পাওয়ার কোনও উপায় ছিল না, তাই আমি জোর করে বন্ধ করে দিয়েছি!

— pstanton

41

এর সহজ উত্তর হ'ল পরিবর্তে একটি স্ক্রোলভিউ ব্যবহার করা এবং স্ক্রোলযোগ্য সম্পত্তিটিকে মিথ্যাতে সেট করা (যদিও কিছু স্টাইলিং সামঞ্জস্য করতে হতে পারে)।

এইভাবে, আমি অন্য কোথাও ট্যাপ করার মুহুর্তটি কীবোর্ডটি বাতিল হয়ে যায়। এটি প্রতিক্রিয়া-নেটিভের সাথে একটি সমস্যা হতে পারে, তবে ট্যাপ ইভেন্টগুলি কেবল স্ক্রোলভিউজের সাহায্যে পরিচালিত বলে মনে হচ্ছে যা বর্ণিত আচরণের দিকে পরিচালিত করে।

সম্পাদনা: জেলোড্রাকে ধন্যবাদ। দয়া করে মনে রাখবেন যে আপনি যদি অন্য কোনও টেক্সটিনপুটটিতে সরাসরি ট্যাপ করেন এবং তারপরে বাইরে, কীবোর্ডটি এখনও লুকায় না।

— TurboFish
সূত্র

1

এটি স্ক্রোলভিউয়ের সাথে কাজ করে তবে এখনও এমন কিছু ঘটনা রয়েছে যা আমি নেভিগেটর এবং কীবোর্ডের সাহায্যে ভিউটি পরিবর্তন করতে বোতামটি ক্লিক করতে পারি নীচের দিকে এখনও স্টিক করে রাখি এবং এটি বন্ধ করার জন্য ম্যানুয়ালি রিটার্ন কীটি ক্লিক করতে হবে :(

— পীযূষ চৌহান

1

আপনি টেক্সটইনপুটের বাইরে ট্যাপ করার সময় কীবোর্ডটি লুকিয়ে থাকে তবে আপনি যদি (বাইরে ট্যাপ করার পরিবর্তে) অন্য টেক্সটইনপুটটিতে ট্যাপ করেন এবং শেষ পর্যন্ত বাইরে ট্যাপ করেন তবে কীবোর্ডটি লুকায় না। 0.6.0 এ পরীক্ষিত।

— jllodra

আমি এখন বিভিন্ন আচরণ দেখছি। টেক্সটইনপুটের বাইরে ট্যাপ করা কীবোর্ডটি লুকিয়ে রাখে, এমনকি যদি আমি সরাসরি অন্য কোনও টেক্সটইনপুটে ট্যাপ করি - তবে এটি একটি সমস্যা কারণ এটিতে টাইপ করতে সক্ষম হতে আপনাকে অন্য টেক্সটইনপুটটিতে দু'বার আলতো চাপতে হবে! দীর্ঘশ্বাস. (আরএন 0.19 সহ)

— লেন রেটগি

1

আপনি একই স্ক্রোলযোগ্য সেট করতে পারেন এবং একই প্রভাবটি অর্জন করতে কীবোর্ডশল্ডপ্রেস্টিটিপস = {'পরিচালিত'} এবং কীবোর্ডডিজমড মোড = on 'অন-ড্রাগ' ব্যবহার করতে পারেন

— এরিক ভিয়েনার

শুধুমাত্র স্ক্রোলভিউ আমার জন্য কাজ করেছে আমি কেন জানি না, যখন আমি কোনও নম্বর কীবোর্ডকে বরখাস্ত করি তখন গৃহীত উত্তরগুলি

— ইয়ভন হুইন

33

আপনি নীচের মত প্রতিক্রিয়া-স্থানীয় থেকে আমদানি করতে পারেন :keyboard

import { Keyboard } from 'react-native';

এবং আপনার কোড এ কিছু হতে পারে:

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

স্থির বরখাস্ত ()

সক্রিয় কীবোর্ড খারিজ করে এবং ফোকাস সরিয়ে দেয়।

— আলিরেজা
সূত্র

আমার দরকার নেই static dismiss()। আমি মাত্র Keyboard.dismiss()আমার সাবমিট পদ্ধতিতে যুক্ত করেছি (যেখানেonSubmitEditing={() => {this.onSubmit()}})

— শেরিলহোমান

30

আমি প্রতিক্রিয়া জানাতে একেবারে নতুন, এবং একটি ডেমো অ্যাপ্লিকেশন তৈরি করার সময় ঠিক একই সমস্যাটিতে চলে এসেছি। আপনি যদি onStartShouldSetResponderপ্রপ ব্যবহার করেন ( এখানে বর্ণিত ) তবে আপনি কোনও পুরানো প্লেইনের উপর ছোঁয়া পেতে পারেন React.View। এই কৌশলটি সম্পর্কে আরও অভিজ্ঞ প্রতিক্রিয়া-চিন্তাভাবনাগুলি শুনতে আগ্রহী / যদি এর থেকে আরও ভাল কিছু হয় তবে এটিই আমার পক্ষে কাজ করেছে:

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
সূত্র

এটি অবশ্যই কাজ করে। তবে আপনি যেমন বলেছিলেন, আমি যদি আগ্রহী তবে তা যদি সঠিক উপায় হয়। আশা করি তারা শীঘ্রই এটিকে সমাধান করেছেন ( github.com/facebook/react-native/issues/113 )

— ই

দুর্দান্ত এটা আমার জন্য কাজ করেছে। আমার স্ক্রোল ভিউ স্পর্শযোগ্য পদ্ধতিতে কাজ করছে না! ধন্যবাদ!

— জেমস ট্রিকি

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

দস্তাবেজগুলি ভুল ছিল, তবে এখন আপডেট করা হয়েছে, এই জনসংযোগ দেখুন: github.com/facebook/react-native/issues/2150

— রায়ান ম্যাকডার্মট

কি করে keyboardShouldPersistTaps? এখানে কেন এটি প্রাসঙ্গিক? ধন্যবাদ

— লেন রেটিগ

1

সতর্কতা: 'কীবোর্ড শোল্ডারপার্সিস্ট টেপস = {মিথ্যা}' অবমূল্যায়ন করা হয়েছে। পরিবর্তে '

— কীবোর্ডশোল্ডারপার্স্টিস্ট ট্যাপস

13

এখানে যদি কোনও মাল্টলাইন পাঠ্য ইনপুট খারিজ করার জন্য কারও কারও উদাহরণ কাজ প্রয়োজন! আশা করি এটি কিছু লোককে সেখানে সাহায্য করবে, ডক্স কোনও মাল্টিলাইন ইনপুট মোটেও খারিজ করার উপায় বর্ণনা করে না, কমপক্ষে কীভাবে এটি করা যায় সে সম্পর্কে কোনও নির্দিষ্ট রেফারেন্স ছিল না। স্ট্যাকের উপরে এখানে পোস্ট করার জন্য এখনও একটি কৌতুক, কেউ যদি মনে করে যে এটি সত্য পোস্টের একটি উল্লেখ হওয়া উচিত তবে আমাকে জানানোর জন্য এই স্নিপেটটি লেখা হয়েছিল।

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আপডেট keyboardShouldPersistTapsA থেকে 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 এর শেষ)। আরএন এখন খুব সহজ এবং সহজেই ব্যবহারযোগ্য। আমরা এই প্রশ্নের সমাধান পেতে পারি তার সহায়তায় আমাদের সমস্ত ক্ষমতা পর্যালোচনা করতে হবে। এই মন্তব্য upvote যাক!

— লিঙ্ক করুন

@ লিংক হাই ধন্যবাদ! আমি একেবারে সম্মত

— ইদান

10

const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

পদ্ধতির নম্বর # 2;

ব্যবহারকারী @ রিকার্ডো-স্টুভেনকে এটি নির্দেশ করার জন্য ধন্যবাদ, কীবোর্ডকে খারিজ করার আরও একটি ভাল উপায় রয়েছে যা আপনি উদাহরণ স্বরূপ নেটিভ ডকসে দেখতে পারেন ।

সাধারণ আমদানি করুন Keyboardএবং কল করুন এর পদ্ধতিdismiss()

— আদিল ইমরান
সূত্র

1

এটি হ'ল কিবোর্ড.ডিজমিসের সমতুল্য সমতুল্য, যা নথিভুক্ত হওয়ার চেয়ে পছন্দনীয়। github.com/facebook/react-native/blob/…

— রিকার্ডো স্টুভেন

এই উত্তরটি দেওয়ার সময়, এটি নথিভুক্ত করা হয়নি। এটি উল্লেখ করার জন্য ধন্যবাদ। আমি আমার উত্তর আপডেট করব।

— আদিল ইমরান

10

আপনার উপাদানগুলিকে একটিতে মোড়ানো TouchableWithoutFeedbackকিছু অদ্ভুত স্ক্রোল আচরণ এবং অন্যান্য সমস্যার কারণ হতে পারে। আমি আমার শীর্ষস্থানীয় অ্যাপ্লিকেশনটি ভরাট সম্পত্তি Viewসহ একটিতে মুড়ে রাখতে পছন্দ করি onStartShouldSetResponderThis এটি আমাকে সমস্ত অনাহীনভাবে ছোঁয়া পরিচালনা করতে এবং তারপরে কীবোর্ড খারিজ করার অনুমতি দেবে। গুরুত্বপূর্ণভাবে, হ্যান্ডলার ফাংশনটি মিথ্যা বলে প্রত্যাবর্তন করে স্পর্শ ইভেন্টটি স্বাভাবিকের মতো প্রচারিত হয়।

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }

— Scottmas
সূত্র

আপনার উত্তর @ স্কটমাসের জন্য ধন্যবাদ। আপনার "অদ্ভুত স্ক্রোল আচরণ এবং অন্যান্য সমস্যা" মন্তব্যের কারণে আমি এটি টাচবল উইথআউটফিডব্যাকের পরিবর্তে ব্যবহার করে শেষ করেছি। তবে আমি যদি আপনার কথায় অন্ধভাবে বিশ্বাস না করে থাকি তবে আপনি কি আপনার মন্তব্যে আরও বিস্তারিত বলতে পারবেন? :)

— কুহার

8

আমি কেবল এটি সর্বাধিক প্রতিক্রিয়া নেটিভ সংস্করণ (0.4.2) ব্যবহার করে পরীক্ষা করেছি এবং আপনি অন্য কোথাও ট্যাপ করলে কীবোর্ড খারিজ হয়ে যায়।

এবং এফওয়াইআই: আপনি "অন-এন্ডেডিটিং" প্রোপকে বরাদ্দ করে কীবোর্ডকে বরখাস্ত করার সময় আপনি একটি কলব্যাক ফাংশন সেট করতে পারেন।

— জোনাথন হুয়াং
সূত্র

আমি "onEdEditing" কলব্যাকটি ডিবাগ করছি, তবে এটি আগে কখনই ট্রিগার হয়নি; দেশীয় প্রতিক্রিয়াটির নতুন সংস্করণটি আমি এটি যাচ্ছি, আপনার পরামর্শের জন্য ধন্যবাদ

— টার্বো ফিশ

7

আমি যদি ভুল না করি তবে প্রতিক্রিয়া নেটিভের সর্বশেষতম সংস্করণটি কীবোর্ডটি সরিয়ে আউট করার মাধ্যমে এই সমস্যাটি সমাধান করেছে।

— christopherdro
সূত্র

4

আপনি কি তাদের কোড / ডকটির কোন অংশটি উল্লেখ করতে সক্ষম হবেন? আমি একই ইস্যুতে চলেছি, এবং আমি এটি আমাকে দিক নির্দেশ করার জন্য সত্যই প্রশংসা করছি :)

— ওকাজাকি মিয়ামা ইয়ুটা

নিশ্চিত হয়ে গেছে যে এটি এখনও আরএন 0.19 (সর্বশেষতম) হিসাবে একটি সমস্যা।

— লেন রেটগি

আরএন 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
সূত্র

6

আপনার সম্পূর্ণ উপাদানটি এতে মুড়িয়ে দিন:

import { TouchableWithoutFeedback, Keyboard } from 'react-native'

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
...
</TouchableWithoutFeedback>

আমার জন্য কাজ করেছেন

— আর্থার মাস্ট্রোপাইট্রো
সূত্র

4

https://facebook.github.io/react-native/docs/keyboard.html

ব্যবহার

Keyboard.dismiss(0);

কীবোর্ড আড়াল করতে।

— কৃষ্ণেন্দু ভট্টাচার্য
সূত্র

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). এখানে উল্লেখ করা হয়েছে।

— স্যামুয়েল
সূত্র

এটি আমার পক্ষে কাজ করেছিল! (তবে আমাকে এটি আমার ২ য় পক্ষের গ্রন্থাগারের ভিতরে যুক্ত করতে হয়েছিল 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: আপনি কীবোর্ডের রিটার্ন কীটি ক্লিক করার সময় আপনি কীবোর্ডটি বন্ধ করতে পারেন, দ্রষ্টব্য: আপনার কীবোর্ডের প্রকারটি যদি সংখ্যাসূচক হয় তবে আপনার কাছে রিটার্ন কী থাকবে না। সুতরাং, আপনি এটিকে প্রপ, রিটার্নকি টাইপ দিয়ে এটি সক্ষম করতে পারেন done। অথবা আপনি ব্যবহার করতে পারেন onSubmitEditing={Keyboard.dismiss}, যখনই আমরা রিটার্ন কী টিপবো তখনই এটি কল হয়। এবং যদি আপনি ফোকাস হারাতে গিয়ে কীবোর্ডটি খারিজ করতে চান তবে আপনি অনুরুপ প্রপ ব্যবহার করতে পারেন,onBlur = {Keyboard.dismiss}

— সরমাদ শাহ
সূত্র

0

Keyboard.dismiss()এটা করবো. তবে কখনও কখনও এটি ফোকাসটি হারাতে পারে এবং কীবোর্ডটি রেফ খুঁজে পেতে অক্ষম হবে। সর্বাধিক সামঞ্জস্যপূর্ণ উপায় হ'ল ref=_refপাঠ্য ইনপুটটিতে একটি রাখুন এবং _ref.blur()যখন আপনাকে বরখাস্ত _ref.focus()করতে হবে এবং যখন আপনাকে কীবোর্ডটি ফিরিয়ে আনতে হবে তখন করুন।

— ব্রুস জিনদা লিন
সূত্র

0

চেষ্টা করে keyboard.dismiss()। এটা আমার জন্য কাজ করেছে

— Amoli
সূত্র

0

টেপযুক্ত পাঠ্য ইনপুটটিতে কীবোর্ড খারিজ এবং স্ক্রোল করার জন্য আমার সমাধানটি এখানে রয়েছে (আমি কীবোর্ডডিজমমড প্রোপ সহ স্ক্রোলভিউটি ব্যবহার করছি):

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>

— সাইরাস জেই
সূত্র

প্রতিক্রিয়া-স্থানীয় মধ্যে কীবোর্ড লুকান

নেটিভ রিএ্যাক্ট ব্যবহার করুন Keyboard.dismiss()

আপডেট উত্তর

আসল উত্তর

রিএ্যাক্ট নেটিভ dismissKeyboardলাইব্রেরি ব্যবহার করুন ।

ScrollViews

নিয়মিত দর্শন

স্থির বরখাস্ত ()

নেটিভ রিএ্যাক্ট ব্যবহার করুন `Keyboard.dismiss()`

রিএ্যাক্ট নেটিভ `dismissKeyboard`লাইব্রেরি ব্যবহার করুন ।