Question

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}
            />
        );
    }
}

上面的代码产生以下内容

OUTPUT

开发环境：

操作系统：Windows 10

节点：v12.10.0

Android Studio：3.5.2

通过程序包管理器安装：

npm install-保存abcjs

Answer 1

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

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

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

react-native是否有类似的东西？

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

1 个答案: