Question

我想在正在运行的项目中使用mathjax，html-code下面的代码在浏览器中运行正常，

<head>
 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
 <script >
  MathJax = {
   tex: {
     inlineMath: [['$', '$'], ['\\(', '\\)']],                   
     displayMath: [['$', '$'], ['\\(', '\\)']],
     processEscapes: true
    }
  }
  </script>

  <script id="MathJax-script" async src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'> </script>
</head>

<body>
 <p><span className='math-tex'>\( (\frac{3}{7},\frac{18}{7}) \)</span></p>
 <p><span className='math-tex'>\( x&gt;0,y&gt;0 \)</span></p>
</body>

但是那些库不如那些浏览器显示那样工作，似乎在webview上工作，但是显示方式不同，我不知道哪一个错，也许webview无法正确呈现script-mathjax？我做了一个星期的尝试，将inlineMath \\(更改为\(，但仍然无法在webview中工作，即使我删除了其他脚本，它仍然可以正常工作，但在webview和普通浏览器

//inside react native

const html = `
<head>
 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
 <script >
  MathJax = {
   tex: {
     inlineMath: [['$', '$'], ['\\(', '\\)']],                   
     displayMath: [['$', '$'], ['\\(', '\\)']],
     processEscapes: true
    }
  }
  </script>

  <script id="MathJax-script" async src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'> </script>
</head>

<body>
 <p><span className='math-tex'>\( (\frac{3}{7},\frac{18}{7}) \)</span></p>
 <p><span className='math-tex'>\( x&gt;0,y&gt;0 \)</span></p>
</body>         
`

//the component

<WebView
 source={ { html } }
 zoomable={ false }
 javaScriptEnabled
 useWebKit // turning off or on, nothing happens
 automaticallyAdjustContentInsets
 thirdPartyCookiesEnabled
 bounces={ false }
/>

Mathjax库无法在React Native WebView中正常工作

0 个答案: