weex 页面真机显示空白

Question

问题描述

使用weex创建了工程，然后修改了页面，页面有三个div组成，npm start在浏览器中能显示出内容，但是在iOS模拟器和真机上显示空白

问题出现的环境背景及自己尝试过哪些方法

环境：

• iOS 12.0
• weex 0.18.0

相关代码

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>

你期待的结果是什么？实际看到的错误信息又是什么？

在浏览器中显示如下并且是我预想的样子：

但是在iOS模拟器和真机上显示空白：

尝试的方法

1. 试着将login div中的子元素都删除，可以显示红色；
2. 保留子元素，试着设置login 的高度，但还是白色；

怀疑是flex导致的，但是不知道怎么解决。

Answer 1

估计是缓存之类的影响。
将platform下的内容都删除，然后重新生成 : weex platform add ios
然后，模拟器上可以显示了。
另外注意flex的写法： flex: number;