React Native 中鍵盤關閉時的回調

Question

我的屏幕上有一個日期選擇器和一個文本輸入。 為了避免難看的過渡，我想在顯示日期選擇器之前關閉鍵盤。

目前，由於我不知道如何在鍵盤被關閉時調用回調，所以我正在做這樣的事情：

 const showBirthdayPicker = () => {
    // Dismiss the keyboard to avoid ugly transitions
    Keyboard.dismiss();

    setTimeout(() => {
      datePickerRef.current.show();
    }, 500);
 };

這可行，但這個解決方案有一個問題......如果在運行此 function 之前關閉鍵盤，用戶將嘗試 0.5 秒的不必要延遲......

有沒有其他方法可以做到這一點？ 我一直在查看鍵盤的文檔，但解雇時沒有回調。

Answer 1

根據文檔，您可以監聽 keyboardDidHide 事件以觀察鍵盤是否關閉。 一個簡單的例子如下

  const showBirthdayPicker = () => {
    // Dismiss the keyboard to avoid ugly transitions
    Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
    Keyboard.dismiss();
  };
  const onKeyboardDidHide = (event) => {
    Keyboard.removeListener('keyboardDidHide', onKeyboardDidHide);
    datePickerRef.current.show();
  };

根據文件

請注意，如果您將 android:windowSoftInputMode 設置為 adjustResize 或 adjustPan，則只有 keyboardDidShow 和 keyboardDidHide 事件在 Android 上可用。 如果您將 android:windowSoftInputMode 設置為 adjustNothing，則 Android 上將沒有可用的事件。 keyboardWillShow 和 keyboardWillHide 通常在 Android 上不可用，因為沒有原生的對應事件。

Answer 2

有點晚了，但我做了一個簡單的 object 來將事件驅動的行為更改為 async/await（這基本上是 promise 的語法糖）。

const myKeyboard = (() => {
  let resolve = () => {};
  let keyboardIsShowing = false;
  Keyboard.addListener('keyboardDidHide', () => {
    keyboardIsShowing = false;
    resolve(true)
  });
  Keyboard.addListener('keyboardDidShow', () => {
    keyboardIsShowing = true;
  })

  const dismiss = () => {
    return new Promise((p) => {
      if (keyboardIsShowing){
        resolve = p;
        Keyboard.dismiss();
      }
      else {
        p(true);
      }
    })
  }

  return {
    dismiss
  }
})();

// Then you can do:
await myKeyboard.dismiss();
datePickerRef.current.show();