谢谢你们的回答。这是钩子版本,如果有人感兴趣:
const [isKeyboardVisible, setKeyboardVisible] = useState(false);
useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
() => {
setKeyboardVisible(true); // or some other action
}
);
const keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
() => {
setKeyboardVisible(false); // or some other action
}
);
return () => {
keyboardDidHideListener.remove();
keyboardDidShowListener.remove();
};
}, []);
以下是示例代码。
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);
}
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow () {
alert('Keyboard Shown');
}
_keyboardDidHide () {
alert('Keyboard Hidden');
}
render() {
return (
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
);
}
}
###2. 你也可以使用其他的npm依赖,比如 react-native-keyboard-listener。
将该组件导入到您想要使用它的文件中:
import KeyboardListener from 'react-native-keyboard-listener';
在您的代码中直接使用该组件。该组件不会呈现任何内容。
<View>
<KeyboardListener
onWillShow={() => { this.setState({ keyboardOpen: true }); }}
onWillHide={() => { this.setState({ keyboardOpen: false }); }}
/>
</View>
要安装此依赖项,请运行以下命令。
npm install --save react-native-keyboard-listener
选择你觉得更方便的任何一种。
Keyboard.addListener('keyboardDidShow', alert('keyboard'));
,并且它会在我打开应用程序时立即触发。这在Web视图和我的Android设备上都是一样的。有什么想法我做错了什么吗? - stefanSalert('keyboard')
在绑定处理程序时被执行。要在处理程序触发时触发警报,请使用 Keyboard.addListener('keyboardDidShow', () => alert('keyboard'));
。 - grossvogel我用一个钩子包装了这个:
import { useState, useEffect } from 'react';
import { Keyboard } from 'react-native';
export const useKeyboardVisible = () => {
const [isKeyboardVisible, setKeyboardVisible] = useState(false);
useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
() => {
setKeyboardVisible(true);
},
);
const keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
() => {
setKeyboardVisible(false);
},
);
return () => {
keyboardDidHideListener.remove();
keyboardDidShowListener.remove();
};
}, []);
return isKeyboardVisible;
};
这个钩子返回一个布尔标志,可以用于有条件地应用逻辑或运行任何其他所需效果。
import { useKeyboardVisible } from "../../useKeyboardVisible";
,然后使用const isKeyboardVisible = useKeyboardVisible();
如果您使用console.log(isKeyboardVisible)
,您将获得您的"true"
或"false"
状态。 - Chukwuebuka Nwobaimport { useKeyboard } from '@react-native-community/hooks'
const keyboard = useKeyboard()
console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)
来源: https://github.com/react-native-community/hooks/blob/master/src/useKeyboard.ts
这是改进版本的@Khemraj答案(对我非常有用),使用绑定方法到实例中,以便可以从侦听器更新组件状态并重新呈现。
import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';
class Example extends Component {
state = {
keyboardState: 'closed'
}
componentWillMount () {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow = () => {
this.setState({
keyboardState: 'opened'
});
}
_keyboardDidHide = () => {
this.setState({
keyboardState: 'closed'
});
}
render() {
return (
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
);
}
}
如果您正在使用React Native 0.71或更高版本,您可以使用Keyboard.isVisible()
示例
import {Keyboard, Text, TextInput, StyleSheet, View} from 'react-native';
const Example = () => {
return (
<View style={style.container}>
<TextInput
style={style.input}
placeholder="Click here…"
onSubmitEditing={Keyboard.dismiss}
/>
{Keyboard.isVisible() && <Text>Keyboard is visible</Text>}
</View>
);
};
const style = StyleSheet.create({
container: {
flex: 1,
padding: 36,
},
input: {
padding: 10,
borderWidth: 0.5,
borderRadius: 4,
},
});
export default Example;
我对@halbano的出色回答进行了小小的改编,这可能取决于您的情况而有所帮助。
export default function useKeyboardOffsetHeight(): number {
const [keyBoardOffsetHeight, setKeyboardOffsetHeight] = useState(0);
useEffect(() => {
const keyboardWillShowListener = Keyboard.addListener(
"keyboardWillShow",
(e) => {
setKeyboardOffsetHeight(e.endCoordinates.height);
}
);
const keyboardWillHideListener = Keyboard.addListener(
"keyboardWillHide",
() => {
setKeyboardOffsetHeight(0);
}
);
return () => {
keyboardWillHideListener.remove();
keyboardWillShowListener.remove();
};
}, []);
return keyBoardOffsetHeight;
}
keyBoardOffsetHeight
与 isKeyboardVisible
我使用整数keyBoardOffsetHeight
而不是布尔值isKeyboardVisible
。因为根据键盘的大小移动其他组件通常很有用。偏移量为0(隐藏)或Y > 0像素(显示)。然后我可以在样式中使用它,如下所示:
const keyBoardOffsetHeight = useKeyboardOffsetHeight();
...
<View
style={{
bottom: keyBoardOffsetHeight,
}}
>
keyboardWillShow
与keyboardDidShow
其次,我使用keyboardWillShow
事件来预测键盘的出现并尽早触发UI更改。
keyboardDidShow
事件在键盘已经出现后触发。
我也基于同样的原因使用了keyboardWillHide
而不是keyboardDidHide
。
MobX版本:
import { observable } from 'mobx'
import { EmitterSubscription, Keyboard } from 'react-native'
class KeyboardStore {
@observable isKeyboardVisible = false
keyboardSubs: EmitterSubscription[] = []
subKeyboard() {
this.keyboardSubs = [
Keyboard.addListener('keyboardDidShow', () => this.isKeyboardVisible = true),
Keyboard.addListener('keyboardDidHide', () => this.isKeyboardVisible = false),
]
}
unsubKeyboard() {
this.keyboardSubs.forEach(sub => sub.remove())
this.keyboardSubs = []
}
}
并且在顶层的App组件内部
useEffect(() => {
store.subKeyboard()
return () => {
store.unsubKeyboard()
}
}, [])
并且可以使用store.isKeyboardVisible
在应用程序中的任何位置进行检查。
我认为这比使用useEffect或其他东西更简单。 TextInput提供了onFocus和onBlur方法。
import {TextInput} from "react-native";
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
<TextInput
value={someValue}
onFocus={() => setIsKeyboardVisible(true}
onBlur={() => setIsKeyboardVisible(false}
/>
在React Native的Keyboard
类中已经有所有需要的东西了。
import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';
class Example extends Component {
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow);
this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
this.keyboardWillShowListener.remove();
this.keyboardWillHideListener.remove();
}
_keyboardWillShow() {
console.log('Keyboard Showning')
}
_keyboardWillHide() {
console.log('Keyboard Heding')
}
_keyboardDidShow() {
alert('Keyboard Shown');
}
_keyboardDidHide() {
alert('Keyboard Hidden');
}
render() {
return (
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
);
}
}
android:windowSoftInputMode =“adjustResize”
。可能是什么原因导致它无法正常工作?谢谢。 - sj_959ReferenceError: Can't find variable: useEffect
,有什么原因吗? - yemimport React, { useEffect, useState } from "react"
,还有import { Keyboard } from "react-native"
。 - Guille Acosta