javascript - REACT-NATIVE - abcjs - ReferenceError：找不到变量：元素

问题描述

import abcjs from 'abcjs';

export default class MusicScore extends Component {
    constructor(props) {
        super(props);
        this.state={
            data: this.props.navigation.getParam('abctune'),
        }
    }
    render(){
        data = this.state.data;
        renderScore = () => {
            abcjs.renderAbc('notation', data);
        }
        return(
            <WebView 
                source={
                    {html: `
                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Document</title>
                        </head>
                        <body>
                            <div id="notation"></div>
                        </body>
                        </html>
                    `}
                }
                domStorageEnabled
                javaScriptEnabled
                injectJavaScript={renderScore}
            />
        );
    }
}

上面的代码产生以下

输出

开发环境：

操作系统：Windows 10

节点：v12.10.0

安卓工作室：3.5.2

通过包管理器安装：

npm install --save abcjs

标签： javascriptreactjsreact-nativeabcjs

不幸的是，您需要设置 DOM。我没有使用 react-native，所以我不确定这是否可行：

使用 SSR 包（如 Nuxt）时，对我有用的是将导入更改为稍后的过程。所以：

mounted() {
  const abcjs = require('abcjs');
}

react-native 中有类似的东西吗？

javascript - REACT-NATIVE - abcjs - ReferenceError：找不到变量：元素

问题描述

解决方案

推荐阅读