react native keyboard area

منطقة لوحة المفاتيح الأصلية

ستعالج هذه المكتبة هذه المشاكل:

• عند ضبط windowSoftInputMode على adjustNothing ، ستتوقف أحداث React Native Keyboard و keyboardDidHide و keyboardDidShow عن العمل (راجع الإصدار رقم 2852).

• عندما تظهر لوحة المفاتيح، سينتقل محتوى التطبيق بالكامل لأعلى (iOS وAndroid).

• بالنسبة لتطبيق الدردشة الذي يحتاج إلى الاحتفاظ بإدخال النص السفلي في نفس الموضع عند إغلاق لوحة المفاتيح وإظهار بعض الإجراءات، لن يكون التبديل بهذه السلاسة.

ابدء

$ yarn add react-native-keyboard-area

يُنصح باستخدام React Native > 0.60، وسيعمل الارتباط التلقائي على تثبيت وحدة RNKeyboard الأصلية للمكتبة لنظامي التشغيل iOS وAndroid.

مقدمة

• على نظام iOS: يوفر React Native مكونًا يُسمى KeyboardAvoidingView ، قم بتغليف صفحتك به وسينقل المحتوى لأعلى عندما تظهر لوحة المفاتيح.

• على Android: بشكل افتراضي في AndroidManifest.xml، لدينا windowSoftInputMode مضبوط على adjustResize ، وسيتحرك محتوى التطبيق بالكامل لأعلى عندما تظهر لوحة المفاتيح، لذلك لا نحتاج إلى مكون KeyboardAvoidingView .

وفي كلتا الحالتين، سيتحرك محتوى الصفحة بالكامل لأعلى أو لأسفل ثم تظهر لوحة المفاتيح أو تختفي.

لكن في بعض الأحيان لا نحتاج إلى نقل التطبيق بالكامل إلى الأعلى، والمثال الأكثر شيوعًا هو تطبيق الدردشة، وقد نرغب في التبديل إلى طريقة عرض مخصصة عندما تختفي لوحة المفاتيح.

هنا تأتي هذه المكتبة

تحل هذه المكتبة المشكلة عن طريق إنشاء مكون مجمّع KeyboardArea ، سيقوم هذا المكون بضبط ارتفاعه ثم تظهر لوحة المفاتيح أو تختفي.

بالإضافة إلى ذلك، من الممكن أيضًا التحكم في الحالة باستخدام الخاصيات isOpen أو باستخدام الأساليب المكشوفة open() و close() .

فائدة أخرى هي أن ReactNaive لن يقوم بإعادة رسم التطبيق بأكمله عندما تظهر لوحة المفاتيح لأن العرض الرئيسي لن يتغير في الحجم.

مثال من العالم الحقيقي: قبل وبعد

قبل : استخدام ReactNative KeyboardAvoidingView وضبط الحجم، النتيجة ليست جيدة جدًا، "تقفز" الصفحة عندما تختفي لوحة المفاتيح بعد التبديل	بعد : باستخدام هذه المكتبة، لن يتحرك العرض بالكامل، وستحتفظ منطقة لوحة المفاتيح الموجودة أسفل الإدخال بنفس الارتفاع أثناء التبديل

كيف يعمل؟

تحتوي هذه المكتبة على بعض التعليمات البرمجية الأصلية لنظامي التشغيل iOS وAndroid لإعلام مكون KeyboardArea ، من خلال حدث يسمى KeyboardSizeChanges ، عندما يتغير ارتفاع لوحة المفاتيح.

• على نظام التشغيل iOS، نستخدم فقط UIResponder KeyboardWillShowNotification وkeyboardWillHideNotification لإصدار الحدث بالارتفاع الحالي.

• على نظام Android، نحتاج إلى ضبط windowSoftInputMode على adjustNothing ، لتجنب تحريك لوحة المفاتيح للعرض بأكمله، ثم نقوم بإنشاء PopupWindow غير مرئية للاستماع إلى تغييرات التخطيط وقياس ارتفاع لوحة المفاتيح.

الاستخدام

معظم المنطق موجود داخل مكون KeyboardArea ، نحتاج فقط إلى تغليف المحتوى الذي نريد إظهاره عندما تختفي لوحة المفاتيح ثم تعيين الدعائم isOpen عندما نحتاج إلى إظهار مكون ChatActionsInput ، في المثال التالي.

** هذه نسخة مبسطة من لقطات الشاشة أعلاه **

 import { KeyboardArea , KeyboardAreaRef } from 'react-native-keyboard-area' ;

/// ...
keyboardSpacerRef = createRef < KeyboardSpacerRef > ( ) ;

handleUserClick = ( ) => {
    this . keyboardSpacerRef . current ?. close ( ) ;
}

handleChangeMode = ( ) => {
    this . setState ( prev => ( {
      inputMode :
        prev . inputMode === ChatInputModes . Actions
          ? ChatInputModes . Text
          : ChatInputModes . Actions ,
    } ) ) ;
}

keyboardAreaHeightChanged = ( isOpen : boolean , currentHeight : number ) => {
  // Your logic
} ;

render ( ) {

    return (
        < PageContent >
            < ChatMessageList />
            < ChatTextInput onChangeMode = { this . handleChangeMode } />
            < KeyboardSpacer
                ref = { this . keyboardSpacerRef }
                isOpen = { inputMode === ChatInputModes . Actions }
                onChange = { this . keyboardAreaHeightChanged }
            >
                < ChatActionsInput />
            </ KeyboardSpacer >
        </ PageContent >
    ) ;
} 

ملاحظات أندرويد

نظرًا لأننا في نظام Android قد نرغب في استخدام AdjustResize لصفحة الآخرين، فيمكننا استخدام هذه المكتبة setWindowSoftInputMode لتغيير وضع SoftInput ديناميكيًا فقط للصفحات التي نحتاجها، على سبيل المثال:

 import { RNKeyboard , SoftInputMode } from 'react-native-keyboard-area' ;

// Example with react-navigation page focus/blur events

componentDidMount ( ) {
  navigation . addListener ( 'blur' , this . componentDidExit ) ;
  navigation . addListener ( 'focus' , this . componentDidEnter ) ;
}

componentDidEnter = ( ) => {
  if ( Platform . OS === 'android' ) {
    RNKeyboard . setWindowSoftInputMode ( SoftInputMode . SOFT_INPUT_ADJUST_NOTHING , ) ;
  }
} ;

componentDidExit = ( ) => {
  if ( Platform . OS === 'android' ) {
    RNKeyboard . setWindowSoftInputMode ( SoftInputMode . SOFT_INPUT_ADJUST_RESIZE ) ;
  }
} ;

componentWillUnmount ( ) {
  navigation . removeListener ( 'blur' , this . componentDidExit ) ;
  navigation . removeListener ( 'focus' , this . componentDidEnter ) ;
}

الاعتمادات

بالنسبة لنظام التشغيل Android، تذهب جميع الاعتمادات إلى Cristian Holdunu وSiebe Brouwer لتنفيذ فكرة PopupWindow ولحساب ارتفاع لوحة المفاتيح، أقوم فقط بنقلها في نظام وحدة React Native.