React Native“交互式”keyboardDismissMode在拖动时抛出错误答案

【问题标题】：React Native "interactive" keyboardDismissMode throws error when draggedReact Native“交互式”keyboardDismissMode在拖动时抛出错误
【发布时间】：2018-10-08 09:45:22
【问题描述】：

错误是：RCTLayoutAnimationGroup expects timings to be in ms, not seconds

当我快速向下拖动键盘时会发生这种情况。有时候这种情况会发生;有时不会。

我在 KeyboardAvoidingView 中使用了一个简单的 TextInput 组件

【问题讨论】：

你拖下来的速度有多快？如果它快于 10 毫秒，那么它将抛出该错误。第 92 行。否则，如果您将延迟设置在 0 和 0.01 之间，它也会引发相同的错误：第 98 行 - github.com/facebook/react-native/blob/master/React/Modules/… 如果以上都不是，您能否提供引发该错误的代码？
@Vlad 我的一些 Beta 测试人员正在快速向下拖动键盘，并且该错误正在抛出。我该如何修复或修补它？
@Vlad 我没有设置任何延迟；我什至不知道那是什么
如果不确切知道它是如何设置的，就很难诊断。你能提供一些代码或一个简单的项目来复制这个问题吗？

标签： react-native react-native-ios react-native-flatlist

【解决方案1】：

向您的 ScrollView 添加bounces={false} 似乎可以解决问题。

<ScrollView keyboardDismissMode="interactive" bounces={false}>

它也稍微改变了行为，但是错误似乎不再出现了。

我认为，如果您希望保持 ScrollView 的“弹跳”行为，最好的方法是让“弹跳”取决于键盘显示。显示键盘时，反弹设置为 false。看看我的示例组件：

export default class App extends Component<Props> {

constructor(){
  super();
  this.state = {
    bounces: true
  }
  this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
}

_keyboardDidShow(){
  this.setState({bounces: false});
}

_keyboardDidHide(){
  this.setState({bounces: true});
}

  render() {
    return (
      <KeyboardAvoidingView style={styles.container}  behavior="padding" enabled>
      <ScrollView keyboardDismissMode="interactive" bounces={this.state.bounces}>
      <TextInput
        style={{height: 40, width: 150, borderColor: 'gray', borderWidth: 1}}
      />
      </ScrollView>

      </KeyboardAvoidingView>
    );
  }
}

编辑：

当持续时间小于 10(ms) 时，RNT hack 将覆盖持续时间。对你来说应该改变：node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js 方法：scheduleLayoutAnimation 改变：

const {duration, easing, endCoordinates} = event;

到：

let {duration, easing, endCoordinates} = event;

并添加：

if(duration < 10){
    duration = 10;
}

在 if (duration && easing) 条件内。

这将确保最短持续时间为 1 毫秒，并且永远不会更短，因此不会再抛出持续时间。

我的 KeyboardAvoidingView.js，_onKeyboardChange 方法看起来像这样：

_onKeyboardChange = (event: ?KeyboardEvent) => {
    if (event == null) {
      this.setState({bottom: 0});
      return;
    }

    let {duration, easing, endCoordinates} = event;
    const height = this._relativeKeyboardHeight(endCoordinates);

    if (this.state.bottom === height) {
      return;
    }

    if (duration && easing) {
      if(duration < 10){
        duration = 10;
    }
      LayoutAnimation.configureNext({
        duration: duration,
        update: {
          duration: duration,
          type: LayoutAnimation.Types[easing] || 'keyboard',
        },
      });
    }
    this.setState({bottom: height});
  };

编辑 2：

我向 RNT 团队提交了一个问题，并向他们打开了一个 PR：https://github.com/facebook/react-native/pull/21858

编辑 3： 该修复已合并以响应本机大师：https://github.com/facebook/react-native/commit/87b65339379362f9db77ae3f5c9fa8934da34b25

【讨论】：

我应该向 React-native 报告这个错误吗？当然，我不是世界上唯一需要通过拖拽来解雇的人。为什么这不是一个更大的问题？
是的，这对我来说也像 RNT 错误。我不确定为什么这不是一个更大的问题，可能是因为它是间歇性的，与 IOS 隔离，并且是滚动视图中的输入。让我知道上述解决方法是否适用于您的 Beta 测试人员。
@TIMEX 看看我的编辑。它显示了在何处覆盖 RNT 代码以避免此异常，保持反弹。
我想我会在他们的 github 上记录问题并提交 PR 以在即将发布的版本中修复它。如果你不介意，我会参考这个帖子。