react-native - 拖动时React Native "interactive"keyboardDismissMode引发错误

Question

错误是:RCTLayoutAnimationGroup expects timings to be in ms, not seconds
当我快速向下拖动键盘时，就会发生这种情况。有时候这种情况会发生;有时不是。

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

Answer 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>
    );
  }
}

编辑:

当RNT小于10(ms)时，将覆盖RNT时长。对您来说应该更改: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;
}

在 内，如果(持续时间和＆缓和)条件。

这将确保最短的持续时间是1ms，并且永远不会更短，因此不会再抛出该持续时间。

我的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:
该修复程序已合并以响应 native 主文件: https://github.com/facebook/react-native/commit/87b65339379362f9db77ae3f5c9fa8934da34b25