如何使用 react native Keyboard.scheduleLayoutAnimation(event) 方法？

Question

我正在将文本输入字段与 iOS / Android 系统键盘同步，以便它粘在键盘的顶部，在 react native键盘模块的文档中，它提到了这种方法：

调度布局动画

static scheduleLayoutAnimation(event)

用于同步 TextInput（或其他键盘附件视图）位置大小随键盘移动而变化的大小。

但是，到目前为止，我似乎找不到任何进一步的文档或示例，以及我当前的实现

Keyboard.scheduleLayoutAnimationscheduleLayoutAnimation((event: any ) => {
   console.log('[TextEditor] keyboard event:', event)
})

抛出以下错误：

ExceptionsManager.js:179 TypeError: _reactNative.Keyboard.scheduleLayoutAnimationscheduleLayoutAnimation 不是函数

有没有人有这种方法的经验？

我目前正在使用 React Native 0.63.3并在iOS 14.2上进行测试，任何帮助将不胜感激，谢谢！

编辑

我能够通过调用获得函数签名：

Keyboard.scheduleLayoutAnimationscheduleLayoutAnimation.toString()

这产生了这个定义：

function (event) {
    var duration = event.duration,
        easing = event.easing;

    if (duration != null && duration !== 0) {
      LayoutAnimation.configureNext({
        duration: duration,
        update: {
          duration: duration,
          type: easing != null && LayoutAnimation.Types[easing] || 'keyboard'
        }
      });
    }
  }

也许这是 TypeScript 中严格模式的问题？

Answer 1

我不知道为什么没有记录此方法的任何示例用法，因为它看起来可能有用。

感谢您，我注意到它在内部使用了LayoutAnimation，这是该方法的实际来源：

node_modules/react-native/Libraries/Components/Keyboard/Keyboard.js

KeyboardEventEmitter.scheduleLayoutAnimation = function(event: KeyboardEvent) {
  const {duration, easing} = event;
  if (duration != null && duration !== 0) {
    LayoutAnimation.configureNext({
      duration: duration,
      update: {
        duration: duration,
        type: (easing != null && LayoutAnimation.Types[easing]) || 'keyboard',
      },
    });
  }
};

module.exports = KeyboardEventEmitter;

关于异常 - 你有一个拼写错误

Keyboard.scheduleLayoutAnimationscheduleLayoutAnimation

与

Keyboard.scheduleLayoutAnimation

scheduleLayoutAnimation不适用于回调。

这行不通

Keyboard.scheduleLayoutAnimation((event: any ) => {
   console.log('[TextEditor] keyboard event:', event)
})

布局动画

Keyboard.scheduleLayoutAnimation接受一个object名为 的参数event。查看实现，它只是一个包装器LayoutAnimation.configureNext，因此您可以使用它来获得相同的效果。布局动画.configureNext

仅使用了 2 个参数event- 名称“event”有点令人困惑，因为它用作动画的配置

const {duration, easing} = event;

您可以像这样调用该函数：

Keyboard.scheduleLayoutAnimation({ duration: 500 });
// or
Keyboard.scheduleLayoutAnimation({ duration: 500, easing: 'easeIn' });

在此调用之后，您需要立即触发涉及键盘的操作。例如让它出现或消失。请参阅链接文档中的示例。

easing是一个可选参数，可以回退到"keyboard"

• 可用的easings来自LayoutAnimation.Types- sprint, linear, easeIn/Out, keyboard。
• 这是另一件令人困惑的事情——知道有一个“键盘”，为什么我还要传递其他东西呢？我猜“键盘”代表键盘动画使用的默认缓动，并提供其他值可以使其更有弹性......

我假设预期用途是这样的：

Keyboard.scheduleLayoutAnimation({ duration: 500 });
Keyboard.dismiss();

或者

Keyboard.scheduleLayoutAnimation({ duration: 500 });
myInputRef.focus();

由于在内部它只使用LayoutAnimation.configureNext“预定”动画，因此可能会应用于更改布局的其他内容而不是键盘上。如果你不与键盘交互，它肯定会被应用到其他东西上。我没想到 - 我希望如果我安排键盘动画并且我不使用键盘，它不会作为布局动画应用到其他东西上

无论如何，就是这样：）