Hermes engine on React Native 0.72.5，function无法toString转成字符串

问题描述

Hermes engine on React Native 0.72.5，function无法toString转成字符串

环境

npm@6.14.18
node@16.17.1

项目依赖

"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.5",
"react-native-gesture-handler": "2.14.1",
"react-native-root-siblings": "3.2.3",
"react-native-safe-area-view": "0.14.101",
"react-navigation": "3.11.1",
"react-art": "^18.2.0",
"react-native-web": "0.9.9",
"react-native-web-webview": "^0.2.8",
"react-navigation-hooks": "^1.0.0-alpha.2",
"@babel/core": "^7.13.10",
"@babel/eslint-parser": "^7.18.9",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-object-rest-spread": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.16.4",
"@babel/preset-flow": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"@babel/runtime": "^7.16.3",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.11",
"@types/node": "^14.18.36",
"@types/react": "^18.0.18",
"@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1",
"babel-loader": "^8.2.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-show-source": "^0.2.1",
"@types/react-native": "^0.60.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.3",
"babel-jest": "23.6.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-native-web": "0.9.9",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.10",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-runtime": "^6.26.0",

解决方案

1. 引入插件 babel-plugin-show-source
   插件地址：babel-plugin-show-source
2. 配置项

// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-show-source',
    // or with options
    [
      'babel-plugin-show-source',
      {
        removeDirective: true,
      },
    ],
  ],
};

3. 在function的第一行加入 show source 即可解决问题。【function里不允许有注释内容】
4. 特殊情况
   若按以上操作不起作用，请在配置里单独设置指令，如

plugins: [
    [
      'babel-plugin-show-source',
      {
        directive: 'show source please',
        // change the directive when in use with hermes
      },
    ],
  ],

再在function的第一行加入 show source please ，即可解决问题。

参考Issues

https://github.com/facebook/hermes/issues/612
https://github.com/supervons/react-native-echarts-pro/issues/35