Taro: 头条map android下闪退或空白

[qilovehua]

相关平台

字节跳动小程序

复现仓库

https://github.com/qilovehua/taro-map

使用框架: React

复现步骤

头条开发工具预览，ios扫码地图正常，android闪退，map仅保留坐标参数android显示页面空白
开发工具也显示空白

页面空白
<Map longitude={lng} latitude={lat} />

页面闪退（在微信小程序下是正常的）
<Map style='width: 100vw; height: 100vh;' longitude={lng} latitude={lat} scale='14' markers={markers} includePoints={points} setting={{}} />

期望结果

map正常

实际结果

map闪退或空白

环境信息

Taro v3.0.6


  Taro CLI 3.0.6 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 11.3.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.6 => 3.0.6 
      @tarojs/mini-runner: 3.0.6 => 3.0.6 
      @tarojs/react: 3.0.6 => 3.0.6 
      @tarojs/runtime: 3.0.6 => 3.0.6 
      @tarojs/taro: 3.0.6 => 3.0.6 
      @tarojs/webpack-runner: 3.0.6 => 3.0.6 
      babel-preset-taro: 3.0.6 => 3.0.6 
      eslint-config-taro: 3.0.6 => 3.0.6 
      react: ^16.10.0 => 16.13.1 

[Chen-jj]

@qilovehua

背景

Taro 3 使用 <template /> 拼接的方式模拟 DOM 树，但小程序组件不支持动态去增添属性，所以我们需要把组件的所有属性都列出来，并给定默认值。

猜想

对于 Issue 提到的情况，很可能是因为某小程序端不兼容组件对应属性的默认值导致。

我这边测试到是 Map 组件的 polyline 和 circles 属性的默认值出错导致白屏。

你可以试试打开 dist/base.ttml，找到 <template name="tmpl_0_map"> 这个模板，

然后把：

polyline="{{ i.polyline }}" circles="{{ i.circles }}"

改为：

polyline="{{ i.polyline === undefined ? [] : i.polyline }}" circles="{{ i.circles === undefined ? [] : i.circles }}"

猜测 polyline 和 cicles 属性都为数组类型，头条没有兼容 undefined 的情况，从而导致报错。

你先试试，可行的话我们下个版本修改一下模版。

[qilovehua]

@Chen-jj

我试了，给polyline和circles默认值确实可以了，谢谢
<Map longitude={lng} latitude={lat} markers={markers} includePoints={points} polyline={[]} circles={[]} style='width: 100vw; height: 100vh;' />

[Chen-jj]

@qilovehua 我们在下个 patch 版本修复一下。