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

问题描述

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

环境

javascript 复制代码
[email protected]
[email protected]

项目依赖

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

相关推荐
海天胜景3 分钟前
vue3 el-table 右击
javascript·vue.js·elementui
Mercury-circle5 分钟前
JavaScript基础知识合集笔记1——数据类型
开发语言·javascript·笔记
WEI_Gaot18 分钟前
React Hooks useRef useId
前端·react.js
一天睡25小时19 分钟前
视频HLS分片与关键帧优化深度解析
前端·javascript
WEI_Gaot20 分钟前
React Hooks useContext useReducer
前端·react.js
Java~~22 分钟前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js
程序员爱钓鱼1 小时前
从零开始开发一个简易的五子棋游戏:使用 HTML、CSS 和 JavaScript 实现双人对战
前端·javascript·游戏开发
林太白1 小时前
NestJS企业级登录注册如何做
前端·javascript·后端
JQShan1 小时前
React Native小课堂:箭头函数 vs 普通函数,为什么你的this总迷路?
javascript·react native·ios
至尊童1 小时前
5个Web开发中的使用技巧
javascript·html