KeyboardAvoidingView - 隐藏键盘时重置高度

我正在使用React Natives KeyboardAvoidingView设置View键盘显示时的高度.但是当我关闭应用程序中的键盘时,View的高度不会更改回原始值.

  
    // my content
  

在打开和关闭键盘之前,带有红色轮廓的视图占据了整个空间.

1> Samer Murad..：

---

关于Nisarg答案的更详细解释.

KeyboardAvoidingView在构造函数中创建一个键

constructor(props) {
    this.state = {
      keyboardAvoidingViewKey: 'keyboardAvoidingViewKey',
    }
}

在键盘上添加监听器将会/隐藏(并在willUnmount中删除它)

import { KeyboardAvoidingView, Keyboard, Platform } from 'react-native'

componentDidMount() {
    // using keyboardWillHide is better but it does not work for android
    this.keyboardHideListener = Keyboard.addListener(Platform.OS === 'android' ? 'keyboardDidHide': 'keyboardWillHide', this.keyboardHideListener.bind(this));
}

componentWillUnmount() {
    this.keyboardHideListener.remove()
}

更新keyboardAvoidingViewKey在keyboardHideListener功能,应该是一个新的值,每次(I使用的时间戳)和渲染时使用此键KeyboardAvoidingView元件.

keyboardHideListener() {
    this.setState({
        keyboardAvoidingViewKey:'keyboardAvoidingViewKey' + new Date().getTime()
    });
}

render() {
    let { keyboardAvoidingViewKey } = this.state
    return (
        
            ...
        
    )
}

注意: 请记住,这将重新创建其中的元素KeyboardAvoidingView(即:将调用它们的constructor函数,我不太清楚为什么,我会在深入调查后更新答案),所以你必须跟踪任何可能被覆盖的州/道具值

更新

经过更深入的调查后,我现在知道为什么在更改密钥后重新创建视图.为了真正理解它为什么会发生,我们必须熟悉react-native如何将渲染命令调度到本机端,这个特殊的解释很长,如果它感兴趣,你可以在这里阅读我的答案.总之,反应天然使用Reactjs到diff的应呈现的变化,这些差异列表随后作为命令发送到被命名的组件UIManager,其发送一个翻译成一个布局树,这改变基于所述差异命令的布局必须的命令.一旦您设置了组件上的一个键,reactjs使用此键来标识更改所述部件,如果这个关键的变化,reactjs标识组件作为一个完全新的,这反过来将初始命令创建所述组件,使得它所有的要从头开始创建子项,因为在新布局树中将其标识为新元素,删除旧树并创建新树而不是仅调整差异

如果您愿意,您可以通过将以下代码添加到您的App.js文件来实际监视这些已分派的邮件:

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
const spyFunction = (msg) => {
    console.log(msg);
};

MessageQueue.spy(spyFunction);

如果你这样做,你会在日志中注意到,每次密钥更改时,返回的命令都是createViews,如上所述,创建嵌套在所述组件下的所有元素.

---

如果您获得“ this.setState”不是一个函数，则在“ componentDidMount”中将“ this.keyboardHideListener”更改为“ this.keyboardHideListener.bind（this）”。

2> Nisarg Thakk..：

---

请为KeyboardAvoidingView提供键，并在打开和关闭键盘时进行更改，以使其呈现并占用高度