ReactNative/keyboard

تُستخدم وحدة 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 الرسميّ