react native启用Hermes后，使用formatter函数echarts不显示的问题

本文链接：https://blog.csdn.net/c1024197824/article/details/123889526

背景

最近在使用第三方开源组件react-native-echarts-pro（对echarts做了包装，用webview渲染显示）做图表开发时发现了一个问题。

我的项目中使用了大量的formatter函数来做数据的自定义格式化工作，在项目开启Hermes引擎后，那些使用了formatter函数的图表都无法正常显示了。

问题复现

开启Hermes:

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,  // clean and rebuild if changing
]

echarts option源码:

...
{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      formatter: (value) => {
        return value + '(week)';
      },
    },
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

echarts运行截图（非正常显示）:
echarts异常显示

问题分析

通过查看Hermes官方库中的issue评论，开启Hermes后，在设备运行代码之前，为了使字节码文件较小并能快速执行，Hermes会编译所有的源码为字节码。当被编译成字节码的formatter函数跟随echarts的option注入到webview中时，是无法被webview正常解析运行的，其toString()方法的返回结果如下图。导致了echarts无法正常渲染显示。

formatter函数字节码

解决方案(不关闭Hermes)

Hermes官方给出的解决方案是在不想被编译成字节码的函数第一行添加代码'show source';，Hermes遇到到这个标识后就不会把该函数编译成字节码了。我们可以在formatter函数第一行添加代码'show source';，这样可以保证启用Hermes的同时，formatter函数也能正常被解析。

...
xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  axisLabel: {
    formatter: (value) => {
      'show source';
      return value + '(week)';
    },
  },
},
...