Javascript 键盘AvoidingView-隐藏键盘时重置高度

我正在使用React Natives

KeyboardAvoidingView

设置显示键盘时我的

视图的高度。但当我在应用程序中关闭键盘时，视图的高度不会更改回其原始值

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


//我的内容

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

请将键交给键盘，避免在键盘打开和关闭时查看和更改，以使其呈现高度

<KeyboardAvoidingView behavior="height" style={styles.step} key={values}>

关于客户答案的更详细解释

在构造函数中为
键盘AvoidingView
创建一个键

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

在键盘的will/did hide上添加侦听器（并在willUnmount中删除它）

更新
keyboardHideListener
函数中的
keyboardAvoidingViewKey
，每次都应该是一个新值（我使用了时间戳），并在呈现
KeyboardAvoidingView
元素时使用此键

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

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

如果这样做，您会在日志中注意到，每次键更改时，返回的命令是
createViews
，它如上所述创建嵌套在所述组件下的所有元素。
在iOS和android上将组件包装在
中

render() {
    const ScrollContainer: View | KeyboardAvoidingView = 
    this.renderDependingOnPlatform();
    const scrollContainerParams: any = {};
    if (isIOS)
        scrollContainerParams.behavior = "padding";
return (
<ScrollContainer style={styles.container} {...scrollContainerParams}>
Scroll and other components
</ScrollContainer>
)}

/**
 * Render scroll container depending on platform
 * @returns {any}
 */
renderDependingOnPlatform() {
    if (isAndroid())
        return View;
    else return KeyboardAvoidingView;
}

render（）{
const ScrollContainer:View |键盘AvoidingView=
this.renderDependengOnPlatform（）；
常量scrollContainerParams:any={}；
国际单项体育联合会（isIOS）
scrollContainerParams.behavior=“padding”；
返回(
滚动条和其他组件
)}
/**
*渲染滚动容器（取决于平台）
*@returns{any}
*/
RenderPendingOnPlatform（）{
if（isAndroid（））
返回视图；
否则返回键盘，避免查看；
}
一个简单的解决方法是将
键盘avoidingview
的
行为属性设置为“padding”。这避免了调用
构造函数
函数的问题，该函数允许您在状态下安全地存储信息（假设您有两个
输入
s，并且您希望在状态下存储文本的值，即使用户在单击两个输入之间折叠键盘）

此方法可能会略微改变
键盘的布局，从而避免查看
的子项，因此请注意。
我也遇到了同样的问题。[iOS]您找到解决方案了吗？@Edgar在某些情况下，我切换到了以下可用的软件包，但RN提供的组件仍然不可用。谢谢你的详细解释。如果你能找到它为什么会重现这些元素，我将不胜感激并更新你的答案！在我的情况下，键盘不会消失，不断上下弹出。这可能是另一种问题，你正在经历的是，此代码不会影响键盘，只影响隐藏在键盘后面的布局，阅读问题，它会说>，当我在应用程序中关闭键盘时，视图的高度不会更改回其原始值。工作起来很有魅力。谢谢如果您得到
this.setState
不是函数，请将
this.keyboardHideListener
更改为
this.keyboardHideListener.bind（this）
中的
componentDidMount
保存了我的一天！Thnx！：）@迪奥菲请阅读萨默尔·穆拉德的回答，他描述了我的回答，大家都能理解。非常感谢。这个给我修好了。布局改变了，但高度偏移来自我隐藏的选项卡栏，因此很容易修复。
import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'
const spyFunction = (msg) => {
    console.log(msg);
};

MessageQueue.spy(spyFunction);

render() {
    const ScrollContainer: View | KeyboardAvoidingView = 
    this.renderDependingOnPlatform();
    const scrollContainerParams: any = {};
    if (isIOS)
        scrollContainerParams.behavior = "padding";
return (
<ScrollContainer style={styles.container} {...scrollContainerParams}>
Scroll and other components
</ScrollContainer>
)}

/**
 * Render scroll container depending on platform
 * @returns {any}
 */
renderDependingOnPlatform() {
    if (isAndroid())
        return View;
    else return KeyboardAvoidingView;
}