Weex: страница отображается правильно в сети, но неверно на устройстве iOS

Question

Я использую weex для запуска проекта, а login.vue выглядит так:

<template>
  <div class="login">
    <div class="images">1
    </div>
    <div class="centerPart">2
    </div>
    <div class="agree">3</div>
  </div>
</template>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  background-color: red;
}
.login :first-child{
  height: 250px;
}
.login :last-child{
  height: 200px;
}
.images {
  flex: 0 0 auto;
  background-color: aqua;
}
.centerPart{
  flex: 1 0 auto;
  background-color: yellow;
}
.agree {
  flex: 0 0 auto;
  background-color: coral;
}
</style>

<script>

</script>

Когда я запускаю npm start, в браузере отображается то, что я хочу:

Однако, когдаЯ запускаю weex run ios, симулятор показывает пустую страницу:

Я также пробую это в устройстве, и он также показывает пустую страницу.

Так что просто удивляйтесь, почему в симуляторе ничего не происходит и как я могу выяснить причину?

Answer 1

Может быть, вы можете попытаться добавить это в своем стиле

width: 750px;
flex: 1;

750px - ширина всего устройства, и мы использовали flex layout по умолчанию

Answer 2

Weex пока не поддерживает полный сокращенный синтаксис flex.Вы можете указать только часть flex-grow.

В вашем примере используйте flex: 1; в .centerPart, и он должен отрегулировать свою высоту.