الواجهة Keyboard في React Native

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

الاستخدام

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

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

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

const Example = () => {
  const [keyboardStatus, setKeyboardStatus] = useState(undefined);

  useEffect(() => {
    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
      setKeyboardStatus("Keyboard Shown");
    });
    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
      setKeyboardStatus("Keyboard Hidden");
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  return (
    <View style={style.container}>
      <TextInput
        style={style.input}
        placeholder='Click here…'
        onSubmitEditing={Keyboard.dismiss}
      />
      <Text style={style.status}>{keyboardStatus}</Text>
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    padding: 36
  },
  input: {
    padding: 10,
    borderWidth: 0.5,
    borderRadius: 4
  },
  status: {
    padding: 10,
    textAlign: "center"
  }
});

export default Example;

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

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

class Example extends Component {
  state = {
    keyboardStatus: undefined
  };

  componentDidMount() {
    this.keyboardDidShowSubscription = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        this.setState({ keyboardStatus: 'Keyboard Shown' });
      },
    );
    this.keyboardDidHideSubscription = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        this.setState({ keyboardStatus: 'Keyboard Hidden' });
      },
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowSubscription.remove();
    this.keyboardDidHideSubscription.remove();
  }

  render() {
    return (
      <View style={style.container}>
        <TextInput
          style={style.input}
          placeholder='Click here…'
          onSubmitEditing={Keyboard.dismiss}
        />
        <Text style={style.status}>
          {this.state.keyboardStatus}
        </Text>
      </View>
    )
  }
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    padding: 36
  },
  input: {
    padding: 10,
    borderWidth: 0.5,
    borderRadius: 4
  },
  status: {
    padding: 10,
    textAlign: "center"
  }
});

export default Example;

التوابع

addListener()‎

static addListener(eventName, callback)

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

المعاملات:

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

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

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

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

تنبيه: هذا التابع مهمل، استعمل التابع remove()‎ مع اشتراك الحدث الذي يعيده التابع addListener()‎.

المعاملات:

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

‎removeAllListeners()‎

static removeAllListeners(eventName)

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

المعاملات:

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

dismiss()‎

static dismiss()

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

‎scheduleLayoutAnimation()‎

static scheduleLayoutAnimation(event)

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

مصادر

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