在键盘显示事件中触发 Meteor Cordova 中著名视图的重绘

Question

我正在使用MeteorFamousViews 来呈现一个简单的页眉/正文/页脚布局：

<template name="layout">
  {{#famousContext id="mainCtx"}}
    {{#HeaderFooterLayout headerSize="100" footerSize="60"}}
      {{#Surface target="header" class="red-bg" translate="[0,0,100]"}}
        <div id="header">header</div>
      {{/Surface}}

      {{#RenderController target="content" transition="slideWindowRight"}}
        {{>yield}}
      {{/RenderController}}

      {{#Surface target="footer" class="red-bg" translate="[0,0,100]"}}
        <div id="footer">footer</div>
      {{/Surface}}
    {{/HeaderFooterLayout}}
  {{/famousContext}}
</template>

正文包含一个输入字段：

<template name="home">
  {{#Surface class="green-bg"}}
    <h2>Home Page</h2>
    <input type="text" style="width:100%;line-height:40px;" placeholder="Type something">
  {{/Surface}}
</template>

在 iOS 8 上的 Phonegap/Cordova 上，当输入字段处于焦点时，会弹出一个键盘。期望的行为是页脚随着键盘向上滑动，并且整个视图被调整大小。默认情况下不会发生这种情况。相反，视图不会改变，键盘出现在页脚的顶部。

我可以监听native.keyboardshow 和native.keyboardhide 事件来检测键盘弹出。 window.onresize 事件未触发，但 window.innerHeight 正在发生变化。如何强制 Famo.us 视图重新绘制并适应新空间？ （最好顺着键盘动作平滑收缩）

Answer 1

如果你想收听onresize 事件，请改用resize 事件，如下所示：

var mainContext = Engine.createContext(document.getElementById('famousAppContent'));
mainContext.on('resize', function(e) {
    console.log('mainContext After resize=' + mainContext.getSize());
}.bind(this));