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

问题描述

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

环境

javascript 复制代码
npm@6.14.18
node@16.17.1

项目依赖

javascript 复制代码
"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. 配置项
javascript 复制代码
// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-show-source',
    // or with options
    [
      'babel-plugin-show-source',
      {
        removeDirective: true,
      },
    ],
  ],
};
  1. 在function的第一行加入 show source 即可解决问题。【function里不允许有注释内容
  2. 特殊情况
    若按以上操作不起作用,请在配置里单独设置指令,如
javascript 复制代码
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

相关推荐
qq_411671983 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年1 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~7 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's8 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim9 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim9 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心9 小时前
vben 之 axios 封装
前端·javascript·学习