我想在键盘隐藏时禁用滚动并在键盘出现时启用。
任何帮助将不胜感激。预先感谢您。
React Native 版本:
0.50.3
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>
);
}
}
您还可以使用功能组件和钩子 useState、useEffect。
import React, { useState, useCallback, useEffect } from "react";
import {
Keyboard,
ScollView,
View,
} from "react-native";
const MyComponent = () => {
const [scrollEnabled, setScrollEnabled] = useState(false);
const keyboardDidShow = useCallback(() => {
// show keyboard
setScrollEnabled(false);
}, []);
const keyboardDidHide = useCallback(() => {
// hide keyboard
setScrollEnabled(true);
}, []);
useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener(
"keyboardDidShow",
keyboardDidShow
);
const keyboardDidHideListener = Keyboard.addListener(
"keyboardDidHide",
keyboardDidHide
);
return () => {
keyboardDidShowListener.remove();
keyboardDidHideListener.remove();
};
}, []);
return (
<ScrollView scrollEnabled={scrollEnabled}>
<View />
</ScrollView>
);
}