عرض مصدر ReactNative/keyboard

<noinclude>{{DISPLAYTITLE:Keyboard في React Native}}</noinclude>
تُستخدم وحدة <code>Keyboard</code> للتّحكّم بأحداث لوحة المفاتيح.
__toc__
== الاستخدام ==
تسمح وحدة <code>Keyboard</code> بالتّنصّت (listen) للأحداث الأصيّلة (native) والاستجابة لها، بالإضافة لإجراء تغييرات في لوحة المفاتيح كإلغائها.

* مثال لمكوِّن دالّة (Function Component)
<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>

* مثال لمكوِّن صنف (Class Component)
<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>

== التوابع ==

=== <code>addListener()‎</code> ===
<syntaxhighlight lang="javascript">
static addListener(eventName, callback)
</syntaxhighlight>يوصل هذا التابع تابع <code>JavaScript</code> بالحدث المعرَّف، بإشعار لوحة المفاتيح الأصيلة، وعندها يعيد هذا التابع مرجعًا إلى المُنصت (listener). 

==== المعاملات ====
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|<code>eventName</code>
|سلسلة نصية (string)
|نعم
|<code>nativeEvent</code>هي سلسلة نصية تعرّف الحدث الذي تنصت له
|-
|<code>callback</code>
|دالة (function)
|نعم
|الدّالة التّي سيتم استدعاؤها عند إطلاق الحدث
|}

==== الحدث الأصيل (nativeEvent) ====
يمكن أن يكون أحد الأحداث التالية:

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

=== <code>‏‏()‎removeListener</code> ===
<syntaxhighlight lang="javascript">
static removeListener(eventName, callback)
</syntaxhighlight>يزيل مُنصتًا معيّنًا. 

==== المعاملات ====
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|<code>eventName</code>
|سلسلة نصية (string)
|نعم
|<code>nativeEvent</code> هي سلسلة نصّية تعرّف الحدث الذي تنصت له
|-
|<code>callback</code>
|دالة (function)
|نعم
|الدّالة التي سيتم استدعاؤها عند إطلاق الحدث
|}

=== <code>()removeAllListeners</code> ===
<syntaxhighlight lang="javascript">
static removeAllListeners(eventName)
</syntaxhighlight>يزيل هذا التابع جميع المُنصتات الخاصة بنوع حدثٍ معيّنٍ. 

==== المعاملات ====
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|<code>eventType</code>
|سلسلة نصية (string)
|نعم
|سلسلة نصية لمنصتات الأحداث الأصيلة التي ستتم إزالتها
|}

=== <code>()dismiss</code> ===
<syntaxhighlight lang="javascript">
static dismiss()
</syntaxhighlight>يلغي التابع <code>()dismiss</code> لوحة المفاتيح الفعّالة، ويزيل التركيز. 

=== <code>()scheduleLayoutAnimation</code> ===
<syntaxhighlight lang="javascript">
static scheduleLayoutAnimation(event)
</syntaxhighlight>يعتبر هذا التابع مفيدًا لمزامنة حجم TextInput (أو أيّ ملحقٍ من ملحقات إظهار لوحة المفاتيح الأخرى)، وتغيرات موقعه مع تحركات لوحة المفاتيح. 

== مصادر ==

* [https://facebook.github.io/react-native/docs/keyboard صفحة Keyboard في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]