我想禁用滚动键盘时隐藏和键盘出现时启用。任何帮助都将不胜感激。先谢谢你。React Native版本:0.50.3
0.50.3
rt4zxlrg1#
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> ); } }
字符串
ws51t4hk2#
你也可以使用函数组件和钩子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> ); }
2条答案
按热度按时间rt4zxlrg1#
https://facebook.github.io/react-native/docs/keyboard.html
有键盘显示和隐藏的监听器。
您可以使用这些功能keyboardDidshow和keyboardDidHide来启用和禁用scrollView。
字符串
ws51t4hk2#
你也可以使用函数组件和钩子useState、useEffect。
字符串