当键盘出现/隐藏时,React Native启用/禁用ScrollView

时间:2018-01-29 09:47:46

标签: react-native keyboard scrollview

我希望在隐藏键盘时禁用滚动,并在键盘出现时启用。

任何帮助将不胜感激。提前谢谢。

React Native Version:0.50.3

1 个答案:

答案 0 :(得分:2)

https://facebook.github.io/react-native/docs/keyboard.html

有键盘显示和隐藏的听众。

您可以使用这些函数keyboardDidshow和keyboardDidHide来启用和禁用scrollView。

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  state {
    toScroll: false
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow () {
    this.setState({ toScroll: true });
  }

  _keyboardDidHide () {
    this.setState({ toScroll: false });
  }

  render() {
    const { toScroll } = this.state;
    return (
      <ScrollView scrollEnabled={toScroll}>
        <View />
      </ScrollView>
    );
  }
}