React Native中是否存在将隐藏/显示的应用程序?切换应用程序时删除键盘侦听器的问题

Question

所以我在键盘显示时隐藏(设置高度动画(图像，在键盘隐藏时再次显示(将高度重置为默认值(。

问题是，如果我开始编辑(键盘显示(，然后切换应用程序并返回到此应用程序(在iOS上(，那么键盘WillHide内的动画将不会运行，并且似乎侦听器keyboardWillShow和keyboardWillHide都被删除了。

当用户切换回应用程序时，有没有办法再次重新应用这些侦听器？

样本代码：

const AnimatedImage = ({ uri }) => {
const IMAGE_HEIGHT = 300;
const height = new Animated.Value(IMAGE_HEIGHT);
useEffect(() => {
const keyboardWillShow = Keyboard.addListener('keyboardWillShow', (e) => {
Animated.timing(height, {
duration: e.duration,
toValue: 0,
useNativeDriver: false,
}).start();
});
const keyboardWillHide = Keyboard.addListener('keyboardWillHide', (e) => {
Animated.timing(height, {
duration: e.duration,
toValue: IMAGE_HEIGHT,
useNativeDriver: false,
}).start();
});
return () => {
keyboardWillShow.remove();
keyboardWillHide.remove();
};
}, []);
return <Animated.Image style={[styles.image, { height }]} source={{ uri }} />
}
const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
image: {
width,
}
});

Answer 1

已解决！

所以@react-native-community/hooks包含了我所需要的内容，它可以读取appState'active', 'background', or (iOS) 'inactive'，并在应用程序再次显示时重新应用键盘侦听器。

import { useAppState } from '@react-native-community/hooks';
...
const appState = useAppState();
useEffect(() => {
...
}, [appState]);