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 الرسميّ