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

Question

我正在努力将文本输入字段与 iOS/Android 系统键盘同步，以便它贴在键盘顶部，在 react native 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

我不知道为什么没有记录此方法的任何示例用法，因为它看起来可能很有用。
多亏了你，我注意到它在内部使用了 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;

关于异常(exception) - 你有一个错字

Keyboard.scheduleLayoutAnimationscheduleLayoutAnimation

对比

Keyboard.scheduleLayoutAnimation

scheduleLayoutAnimation不适用于回调。
这行不通

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

布局动画Keyboard.scheduleLayoutAnimation需要 object名为 event 的参数.查看实现，它只是 LayoutAnimation.configureNext 的包装器。所以你可以用它来代替同样的效果。 LayoutAnimation.configureNextevent 中仅使用了 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 “预定”动画可能会应用到其他改变布局的东西上，而不是键盘上。如果您不与键盘交互，它肯定会应用于其他东西。
我没想到 - 我希望如果我安排键盘动画并且我不使用键盘，它将不会应用于其他东西作为布局动画
反正就是这样:)