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

Question

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

scheduleLayoutAnimation

static scheduleLayoutAnimation(event)

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

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

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

抛出以下错误：

ExceptionsManager.js:179 类型错误： _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

我认为您在实现中只是有一个错字 - 您重复 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，因此“预定”动画可能会应用在其他改变布局的东西上，而不是在键盘上。如果您不与键盘交互，它肯定会应用于其他东西。 我没想到 - 我希望如果我安排键盘动画并且我不使用键盘，它将不会应用于其他东西作为布局动画

反正就是这样:)