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

Question

我正在努力将文本输入字段与 iOS / Android 系统键盘同步，以便它粘在键盘的顶部，在本机反应的文档中 Keyboard 模块提到了这个方法：

scheduleLayoutAnimation

static scheduleLayoutAnimation(event)

Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.

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

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

抛出以下错误：

ExceptionsManager.js:179 TypeError: _reactNative.Keyboard.scheduleLayoutAnimationscheduleLayoutAnimation is not a function

有人用过这种方法吗？

我目前正在使用 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

我认为你只是在你的实现中有一个错字——你重复了 scheduleLayoutAnimation 两次，而它应该只是：

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

这可以解释您收到类型错误的原因——方法“scheduleLayoutAnimationscheduleLayoutAnimation”不存在。

Answer 2

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

多亏了你，我注意到它在内部使用了 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 接受一个名为 event 的 object 参数。查看实现，它只是 LayoutAnimation.configureNext 的包装器，因此您可以使用它来获得相同的效果。 LayoutAnimation.configureNext

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

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，所以“预定”动画可能会应用到其他改变布局的东西上，而不是键盘上。如果您不与键盘交互，它肯定会应用于其他东西。我没想到 - 我希望如果我安排键盘动画并且我不使用键盘，它不会作为布局动画应用到其他东西上

总之就是这样:)

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

How to use the react native Keyboard.scheduleLayoutAnimation(event) method?

keyboard

react-native

编辑

关于异常 - 你有错字

scheduleLayoutAnimation 不适用于回调。

布局动画

`scheduleLayoutAnimation` 不适用于回调。