javascript - KeyboardAvoidingView-键盘隐藏时重置高度

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

<KeyboardAvoidingView behavior="height" style={styles.step}>
  <View style={styles.stepHeader}>
    // my content
  </View>
</KeyboardAvoidingView>

在我打开和关闭键盘之前，带有红色轮廓的 View 确实占据了整个空间。

最佳答案

有关Nisarg答案的更详细说明。

在构造函数中为KeyboardAvoidingView创建一个 key

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

在键盘的will/did隐藏处添加监听器(并在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，每次都应该是一个新值(我使用了一个时间戳)，并在呈现KeyboardAvoidingView元素时使用此键。

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

render() {
    let { keyboardAvoidingViewKey } = this.state
    return (
        <KeyboardAvoidingView behavior={'height'} key={keyboardAvoidingViewKey} style={...}>
            ...
        </KeyboardAvoidingView>
    )
}

注意:
请记住，这将在KeyboardAvoidingView中重新创建元素(即:将调用其constructor函数，我不太确定为什么，我将在更深入的调查后更新答案)，因此您必须跟踪所有状态/属性值可能会被覆盖

更新

经过更深入的研究之后，我现在知道更改 key 后为什么要重新创建 View 。
为了真正理解发生这种情况的原因，必须熟悉react-native如何将render命令分发到 native 端，这一特殊的解释很长，如果您感兴趣，可以阅读我的回答here。简而言之，react-native使用Reactjs来比较应呈现的更改，然后将这些差异作为命令发送到名为UIManager的组件，该组件发送命令命令，该命令转换为布局树，该树根据diff命令更改布局。
在组件上设置键后，reactjs使用此键来标识对该组件的更改，如果此键更改，则reactjs会将组件标识为全新的组件，这反过来会发送初始命令来创建该组件，使所有组件从头开始创建的子级，因为在新的布局树中将其标识为新元素，删除了旧的树并创建了一个新的树，而不仅仅是调整差异

如果愿意，您实际上可以通过将以下代码添加到App.js文件中来监视这些已调度的消息:

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

MessageQueue.spy(spyFunction);

如果这样做，您会在日志中注意到每次键更改时，作为返回而分派(dispatch)的命令是createViews，就像上面所述的那样，它创建了嵌套在该组件下的所有元素。

关于javascript - KeyboardAvoidingView-键盘隐藏时重置高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41616457/