react native keyboard area

reaksi-asli-keyboard-area

Perpustakaan ini akan mengatasi masalah ini:

• Ketika windowSoftInputMode disetel ke adjustNothing , event React Native Keyboard, keyboardDidHide dan keyboardDidShow , akan berhenti bekerja (lihat edisi #2852).

• Saat Keyboard muncul, seluruh konten aplikasi akan berpindah ke atas (iOS dan Android).

• Untuk aplikasi obrolan yang perlu menjaga input teks bawah pada posisi yang sama saat menutup Keyboard dan menampilkan beberapa tindakan, peralihannya tidak akan semulus itu.

Memulai

$ yarn add react-native-keyboard-area

Direkomendasikan untuk menggunakan React Native > 0.60, autolinking akan menginstal modul RNKeyboard asli perpustakaan ini untuk iOS dan Android.

Perkenalan

• Di iOS: React Native menyediakan komponen bernama KeyboardAvoidingView , gabungkan halaman Anda dengan komponen tersebut dan konten akan berpindah ke atas saat keyboard muncul.

• Di Android: Secara default di AndroidManifest.xml kita mengatur windowSoftInputMode ke adjustResize , seluruh konten aplikasi akan berpindah ke atas saat keyboard muncul sehingga kita tidak memerlukan komponen KeyboardAvoidingView .

Dalam kedua cara tersebut, seluruh konten halaman akan bergerak ke atas atau ke bawah lalu Keyboard muncul atau menghilang.

Namun terkadang kita tidak memerlukan seluruh aplikasi untuk berpindah ke atas, contoh paling umum adalah aplikasi Obrolan, kita mungkin ingin beralih ke Tampilan Kustom saat keyboard hilang.

Inilah Perpustakaan ini

Library ini mengatasi masalah tersebut dengan membuat komponen pembungkus KeyboardArea , komponen ini akan menyesuaikan ketinggiannya lalu keyboard muncul atau hilang.

Selain itu, dimungkinkan juga untuk mengontrol status dengan props isOpen atau dengan metode open() dan close() yang terbuka.

Keuntungan lainnya adalah ReactNaive tidak akan mengecat ulang seluruh aplikasi saat keyboard muncul karena tampilan utama tidak akan berubah ukurannya.

Contoh dunia nyata: sebelum dan sesudah

Sebelum : Menggunakan ReactNative KeyboardAvoidingView dan adjustResize, hasilnya kurang bagus, halaman "melompat" ketika keyboard menghilang setelah peralihan	Setelah : Menggunakan perpustakaan ini, seluruh tampilan tidak akan bergerak, dan area keyboard di bawah input akan tetap sama tingginya selama peralihan

Bagaimana cara kerjanya?

Pustaka ini memiliki beberapa kode asli iOS dan Android untuk diberitahukan, melalui peristiwa bernama KeyboardSizeChanges , komponen KeyboardArea ketika ketinggian keyboard berubah.

• Di iOS kami hanya menggunakan UIResponder keyboardWillShowNotification dan keyboardWillHideNotification untuk kemudian memancarkan acara dengan ketinggian saat ini.

• Di Android kita perlu mengatur windowSoftInputMode ke adjustNothing , untuk menghindari keyboard berpindah ke seluruh tampilan, maka kita membuat PopupWindow yang tidak terlihat untuk mendengarkan perubahan tata letak dan mengukur tinggi keyboard.

Penggunaan

Sebagian besar logikanya ada di dalam komponen KeyboardArea , kita hanya perlu membungkus konten yang ingin kita tampilkan ketika keyboard menghilang dan kemudian mengatur props isOpen ketika kita perlu menampilkan, dalam contoh kasus berikut, komponen ChatActionsInput .

** ini adalah versi sederhana dari tangkapan layar di atas **

 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 >
    ) ;
} 

Catatan Android

Karena di Android kita mungkin ingin menggunakan adjustResize untuk halaman lain, kita dapat menggunakan perpustakaan setWindowSoftInputMode ini untuk secara dinamis mengubah mode SoftInput hanya untuk halaman yang kita perlukan, misalnya:

 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 ) ;
}

Kredit

Untuk Android, semua kredit diberikan kepada Cristian Holdunu dan Siebe Brouwer untuk implementasi ide PopupWindow dan untuk menghitung tinggi keyboard, saya hanya mem-portingnya ke sistem modul React Native.