referenceError:cannot find variable：document

[wangyeming]

注释的这行，只要放开，RN就挂了，referenceError:cannot find variable：document

求助！

chart.pieLabel({

  skipOverlapLabels: false,

  sidePadding: 40,

  label1: function label1(data, color) {

  return {

  //text: data.name,

  fill: color,

  };

 },

  }

});

[simaQ]

@antv/f2@3.3.2-beta.2 已经修复，你试一下。

[wangyeming]

亲，还有报同样的错，我贴一下错误信息和我的代码

package.json

{ "name": "f2_demo", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "@antv/f2": "^3.3.2-beta.2", "react": "16.6.1", "react-native": "0.57.7", "react-native-canvas": "^0.1.24", "react-native-deprecated-custom-components": "^0.1.2", "react-native-gesture-handler": "^1.0.10", "react-navigation": "^3.0.7" }, "devDependencies": { "babel-jest": "23.6.0", "jest": "23.6.0", "metro-react-native-babel-preset": "0.50.0", "react-test-renderer": "16.6.1" }, "jest": { "preset": "react-native" } }

画图代码：
`handleCanvas = canvas => {

canvas.width = width;
canvas.height = width;
const my_data = [
  { name: "aaaa", percent: 0.6, a: "1" },
  { name: "bbbbb", percent: 0.4, a: "1" },
];
this.setState({
  height: canvas.height
});
const chart = new F2.Chart({
  el: canvas,
  width: width,
  height: width,
  padding: [0, "auto", "auto"]
});
chart.source(my_data, {
  percent: {
    formatter(val) {
      return val * 100 + "%";
    }
  }
});
chart.legend({
  position: "bottom"
});
chart.coord("polar", {
  transposed: true,
  radius: 0.55
});
chart.axis(false);
chart
  .interval()
  .position("a*percent")
  .color("name", [
    "#997e66",
    "#AB47BC",
  ])
  .adjust("stack")
  .style({
    lineWidth: 1,
    stroke: "#fff",
    lineJoin: "round",
    lineCap: "round"
  });
chart.pieLabel({
  skipOverlapLabels: false,
  sidePadding: 40,
  label1: function label1(data, color) {
    return {
      text: data.name,                    
      fill: color,
    };
  },
  label2: function label2(data, color) {
    return {
      // text: '%' + String(Math.floor(my_data.percent * 100) / 100),
      fill: color,
      fontWeight: 'bold'
    };
  }
});
chart.render();

};`

报错信息

屏蔽label1和label2的text

@simaQ

[simaQ]

我在 node 环境下是运行成功的。

请你将 node_modules 删除，重新安装一下 3.3.2-beta.2 版本

[wangyeming]

node环境我也试了，确实没问题。

rn环境就挂了(捂脸)

@simaQ

[simaQ]

我没有 rn 环境，是否可以提供一个线上可运行及调试的环境？
或者我给你一个定位思路，这个问题应该是在计算文本的 width 的时候获取不到 context 上下文对象的原因，你调试下 pie-label.js 中调用 getBBox() 的方法跟进去 https://github.com/antvis/f2/blob/master/src/graphic/shape/text.js#L213 看看 context 有没有传入，3.3.2-beta.2 版本中我在这行代码里面手动写入了 https://github.com/antvis/f2/blob/master/src/plugin/pie-label.js#L85

[wangyeming]

@simaQ 稍等，我提交一下我的demo代码，然后你本地拉取一下就可以运行测试了。你看这样是否可以。

那个你说的调试，我也试着看一下，不一定能看懂(捂脸)

[wangyeming]

你好，我把代码传到了 https://github.com/wangyeming/f2_demo

react native的环境确实稍微麻烦点 https://facebook.github.io/react-native/docs/getting-started

我看到 f2有个官方的react native的demo, 你看能否借用该同事的环境，定位下问题呢？多谢啦！

@simaQ

[wangyeming]

@simaQ 你好，我debug了这一行，context不是空，还可能是什么原因呢？