react-native – React Native“interactive”keyboardDismissMo

<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 hack将覆盖持续时间.对你来说应该改变：node_modules / react-native / Libraries / Components / Keyboard / KeyboardAvoidingView.js方法：scheduleLayoutAnimation change：

const {duration,easing,endCoordinates} = event;

至：

let {duration,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,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团队提交了一个问题,并向他们开了一个公关：https://github.com/facebook/react-native/pull/21858