reactjs - لوحة - مسح لائحه الكلمات التي تم التعرف عليها




إخفاء لوحة المفاتيح في رد الفعل الأصلي (17)

استخدم Keyboard.dismiss() React Native

تحديث الإجابة

كشف React Native عن طريقة الإقالة الثابتة dismiss() على Keyboard ، وبالتالي فإن الطريقة التي تم تحديثها هي:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

الجواب الأصلي

استخدم github.com/facebook/react-native/blob/master/Libraries/… Native's github.com/facebook/react-native/blob/master/Libraries/… Library.

واجهت مشكلة مشابهة للغاية وشعرت أنني كنت الوحيد الذي لم أفهمها.

ScrollViews

إذا كان لديك ScrollView ، أو أي شيء يرث منه مثل ListView ، فيمكنك إضافة prop التي ستقوم بإغلاق لوحة المفاتيح تلقائيًا استنادًا إلى الضغط على الأحداث أو سحبها.

الدعامة هي keyboardDismissMode ويمكن أن يكون لها قيمة none ، interactive أو on-drag . يمكنك قراءة المزيد عن ذلك keyboardDismissMode .

المشاهدات العادية

إذا كان لديك شيء آخر غير ScrollView أن تضغط أي أداة لإغلاق لوحة المفاتيح ، يمكنك استخدام onPress بسيطة onPress استخدام مكتبة github.com/facebook/react-native/blob/master/Libraries/… بـ github.com/facebook/react-native/blob/master/Libraries/… لإغلاق لوحة المفاتيح لإغلاق لوحة المفاتيح نيابة عنك.

في المثال الخاص بك ، يمكنك فعل شيء مثل هذا:

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 واحدة كما هو موضح أعلاه.

إذا قمت بالضغط على رسالة نصية ، فأريد أن أكون قادرًا على النقر في مكان آخر لإغلاق لوحة المفاتيح مرة أخرى (وليس مفتاح الإرجاع). لم أجد أدنى جزء من المعلومات المتعلقة بهذا في جميع البرامج التعليمية والمدونات التي قرأتها.

هذا المثال الأساسي لا يزال لا يعمل بالنسبة لي مع رد الفعل الأصلي 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 ، وقد واجهت نفس المشكلة تمامًا أثناء إنشاء تطبيق تجريبي. إذا كنت تستخدم دعامة onStartShouldSetResponder (الموصوفة here ) ، فيمكنك الحصول على اللمسات على React.View القديم React.View . من الغريب أن أسمع أفكارًا أكثر خبرة عن ردود الفعل حول هذه الاستراتيجية / إذا كانت هناك فكرة أفضل ، ولكن هذا هو ما نجح لي:

import { Keyboard } from 'react-native';

2 الأشياء أن نلاحظ هنا. أولاً ، كما تمت مناقشته github.com/facebook/react-native/issues/113 ، ليست هناك طريقة لإنهاء تحرير جميع المقابلات الفرعية ، لذلك يتعين علينا الرجوع إلى TextInput مباشرة TextInput . ثانياً ، يتم اعتراض onStartShouldSetResponder بواسطة عناصر التحكم الأخرى onStartShouldSetResponder فوقه. لذلك لن يؤدي النقر على TextInput وما إلى ذلك (بما في ذلك TextInput آخر) ضمن عرض الحاوية إلى إطلاق الحدث. ومع ذلك ، سيؤدي النقر فوق Image داخل عرض الحاوية إلى استبعاد لوحة المفاتيح.


إذا كان أي شخص يحتاج إلى مثال عملي لكيفية رفض إدخال نص متعدد الأسطر هنا ، فانتقل! آمل أن يساعد ذلك بعض الأشخاص هناك ، لا تصف المستندات المستندات طريقة لرفض إدخال متعدد الخطوط على الإطلاق ، على الأقل لم يكن هناك مرجع محدد حول كيفية القيام بذلك. لا يزال هناك أمر لنشره فعليًا هنا على المكدس ، إذا اعتقد أي شخص أن هذا يجب أن يكون مرجعًا للنشر الفعلي الذي تمت كتابة هذا المقتطف لإخبارنا به.

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>
    )
  }
}

إذا لم أكن مخطئًا ، فإن أحدث إصدار من React Native قد حل هذه المشكلة المتمثلة في القدرة على استبعاد لوحة المفاتيح عن طريق النقر.


استخدم هذا للإقالة المخصصة

var dismissKeyboard = require('dismissKeyboard');

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

الإجابة البسيطة هي استخدام ScrollView بدلاً من View وتعيين الخاصية القابلة للتمرير إلى false (قد تحتاج إلى ضبط بعض أنماط التصميم).

بهذه الطريقة ، يتم رفض لوحة المفاتيح في اللحظة التي أقوم فيها بالنقر فوق مكان آخر. قد تكون هذه مشكلة في رد الفعل الأصلي ، ولكن يبدو أن أحداث النقر يتم التعامل معها فقط مع ScrollViews مما يؤدي إلى السلوك الموصوف.

تحرير: بفضل jllodra. يرجى ملاحظة أنه إذا قمت بالضغط مباشرة على Textinput آخر ثم خارجها ، فلن تخفي لوحة المفاتيح.


تحديث استخدام ScrollView ل ScrollView React Native 0.39

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

ومع ذلك ، لا تزال هناك مشكلة في مربعي TextInput . على سبيل المثال. يقوم نموذج اسم المستخدم وكلمة المرور بإغلاق لوحة المفاتيح عند التبديل بين المدخلات. ترغب في الحصول على بعض الاقتراحات للحفاظ على لوحة المفاتيح حية عند التبديل بين TextInputs أثناء استخدام ScrollView .


تستخدم وحدة لوحة المفاتيح للتحكم في أحداث لوحة المفاتيح.

  • import { Keyboard } from 'react-native'
  • إضافة رمز أدناه في طريقة التقديم.

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

يمكنك استخدام -

Keyboard.dismiss()

static extract () استبعاد لوحة المفاتيح النشطة وإزالة التركيز حسب المستندات الأصلية للرد.


جرب keyboard.dismiss() . عملت معي


في استخدام ScrollView

keyboardShouldPersistTaps="handled" 

هذا سوف يؤدي وظيفتك.


لقد اختبرت ذلك للتو باستخدام أحدث إصدار من React Native (0.4.2) ، ويتم رفض لوحة المفاتيح عند النقر فوق مكان آخر.

و FYI: يمكنك تعيين وظيفة رد الاتصال ليتم تنفيذها عندما تقوم بإغلاق لوحة المفاتيح عن طريق تعيينها إلى "onEndEditing" prop.


ماذا عن وضع مكون ملموس حول / بجانب 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>
        )
    }
}

هناك العديد من الطرق التي يمكنك من خلالها التعامل مع ذلك ، لا تتضمن الإجابات أعلاه نوع returnType لأنه لم يتم تضمينه في رد الفعل الأصلي في ذلك الوقت.

1: يمكنك حلها عن طريق لف مكوناتك داخل ScrollView ، بشكل افتراضي ScrollView يغلق لوحة المفاتيح إذا ضغطنا في مكان ما. ولكن إذا كنت تريد استخدام ScrollView ولكن تعطيل هذا التأثير. يمكنك استخدام pointerEvent prop لتمرير عرض pointerEvents = 'none' .

2: إذا كنت ترغب في إغلاق لوحة المفاتيح على زر اضغط ، يمكنك فقط استخدام Keyboard من react-native

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

3: يمكنك أيضًا إغلاق لوحة المفاتيح عند النقر فوق مفتاح الإرجاع على لوحة المفاتيح ، ملاحظة: إذا كان نوع لوحة المفاتيح رقميًا ، فلن يكون لديك مفتاح إرجاع. لذلك ، يمكنك تمكينه عن طريق إعطائه دعامة ، returnKeyType إلى done . أو يمكنك استخدام onSubmitEditing={Keyboard.dismiss} ، يتم الاتصال به عندما نضغط على مفتاح الإرجاع. وإذا كنت تريد استبعاد لوحة المفاتيح عند فقد التركيز ، فيمكنك استخدام onBlur prop ، onBlur = {Keyboard.dismiss}


هناك عدة طرق ، إذا كنت تتحكم في حدث مثل onPress فيمكنك استخدام:

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>
   );
}

خيار أكثر هو عندما ينقر المستخدم خارج لوحة المفاتيح:

import { Keyboard } from 'react-native'

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

يمكنك استيراد keyboard من رد الفعل الأصلي مثل أدناه:

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

وفي التعليمات البرمجية الخاصة بك يمكن أن يكون شيء مثل هذا:

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

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

استبعاد ثابت ()

استبعاد لوحة المفاتيح النشطة وإزالة التركيز.



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

المنهج رقم 2

بفضل user @ ricardo-stuven لتوضيح ذلك ، هناك طريقة أخرى أفضل لإغلاق لوحة المفاتيح التي يمكنك رؤيتها في github.com/facebook/react-native/blob/… في مستندات رد الفعل الأصلية.

استيراد Keyboard البسيطة واستدعاء أنها طريقة dismiss()





react-native