Keyboard في React Native

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

الاستخدام

تسمح وحدة Keyboard بالتّنصّت (listen) للأحداث الأصيّلة (native) والاستجابة لها، بالإضافة لإجراء تغييرات في لوحة المفاتيح كإلغائها.

مثال لمكوِّن دالّة (Function Component)

import React, { useEffect } from "react";
import { Keyboard, TextInput, StyleSheet } from "react-native";

const Example = () => {

  useEffect(() => {
    Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
    Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

    // cleanup function
    return () => {
      Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
      Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
    };
  }, []);

  const _keyboardDidShow = () => {
    alert("Keyboard Shown");
  };

  const _keyboardDidHide = () => {
    alert("Keyboard Hidden");
  };

  return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
}

const s = StyleSheet.create({
   input:{
    margin:60,
    padding: 10,
    borderWidth: 0.5,
    borderRadius: 4,
    backgroundColor: "#fff"
   }
})

export default Example;

مثال لمكوِّن صنف (Class Component)

import React, {Component} from 'react';
import {Keyboard, TextInput , StyleSheet} from 'react-native';

class Example extends Component {
  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._keyboardDidShow,
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this._keyboardDidHide,
    );
  }

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

  _keyboardDidShow() {
    alert('Keyboard Shown');
  }

  _keyboardDidHide() {
    alert('Keyboard Hidden');
  }

  render() {
    return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
  }
}

const s = StyleSheet.create({
   input:{
    margin:60,
    padding: 10,
    borderWidth: 0.5,
    borderRadius: 4,
    backgroundColor: "#fff"
   }
})

export default Example;

التوابع

`addListener()‎`

static addListener(eventName, callback)

يوصل هذا التابع تابع JavaScript بالحدث المعرَّف، بإشعار لوحة المفاتيح الأصيلة، وعندها يعيد هذا التابع مرجعًا إلى المُنصت (listener).

المعاملات

الاسم	النوع	مطلوب	الوصف
`eventName`	سلسلة نصية (string)	نعم	`nativeEvent`هي سلسلة نصية تعرّف الحدث الذي تنصت له
`callback`	دالة (function)	نعم	الدّالة التّي سيتم استدعاؤها عند إطلاق الحدث

الحدث الأصيل (nativeEvent)

يمكن أن يكون أحد الأحداث التالية:

keyboardWillShow
keyboardDidShow
keyboardWillHide
keyboardDidHide
keyboardWillChangeFrame
keyboardDidChangeFrame

ملاحظة: إذا وضعت android:windowSoftInputMode مساويةً للقيمة adjustResize، أو adjustPan، فإن الحدثين keyboardDidShow، وkeyboardDidHide سيتوفران فقط على منصّة Android؛ أمّا إذا وضعت android:windowSoftInputMode مساويةً للقيمة adjustNothing، فلن يتوفر أي حدثٍ على منصة Android، وعادة لا يتوفر الحدثان keyboardWillShow، وkeyboardWillHide على منصة Android بسبب عدم وجود أحداثٍ أصيلةٍ موافقةٍ لهما.

`removeListener()‎`

static removeListener(eventName, callback)

يزيل مُنصتًا معيّنًا.

المعاملات

الاسم	النوع	مطلوب	الوصف
`eventName`	سلسلة نصية (string)	نعم	`nativeEvent` هي سلسلة نصّية تعرّف الحدث الذي تنصت له
`callback`	دالة (function)	نعم	الدّالة التي سيتم استدعاؤها عند إطلاق الحدث

`()removeAllListeners`

static removeAllListeners(eventName)

يزيل هذا التابع جميع المُنصتات الخاصة بنوع حدثٍ معيّنٍ.

المعاملات

الاسم	النوع	مطلوب	الوصف
`eventType`	سلسلة نصية (string)	نعم	سلسلة نصية لمنصتات الأحداث الأصيلة التي ستتم إزالتها

`()dismiss`

static dismiss()

يلغي التابع ()dismiss لوحة المفاتيح الفعّالة، ويزيل التركيز.

`()scheduleLayoutAnimation`

static scheduleLayoutAnimation(event)

يعتبر هذا التابع مفيدًا لمزامنة حجم TextInput (أو أيّ ملحقٍ من ملحقات إظهار لوحة المفاتيح الأخرى)، وتغيرات موقعه مع تحركات لوحة المفاتيح.

مصادر

صفحة Keyboard في توثيق React Native الرسميّ