如何在React Native View中显示数学方程式

时间:2017-02-11 15:01:54

标签: react-native

如何在React Native Views中渲染数学方程式?对于Web应用程序,我们可以使用LaTex或MathJax解决方案。但React Native呈现本机组件。使用WebView会很糟糕,因为MathJax加载会为每个WebView组件花费时间。 我们如何在React Native Views(非WebView)上渲染数学公式?

2 个答案:

答案 0 :(得分:0)

MathJax允许你使用渲染SVG,所以你可以尝试生成SVG,然后在React Native中渲染它(我很确定它不会开箱即用,但至少它是一个方式)

答案 1 :(得分:0)

React Native中有一个MathJax库。库有时无法正常工作,但是您应该尝试一下。 https://github.com/calvinkei/react-native-mathjax#readme

用法

<MathJax
  // HTML content with MathJax support
  html={'$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$<br><p>This is an equation</p>'}
  // MathJax config option
  mathJaxOptions={{
    messageStyle: 'none',
    extensions: [ 'tex2jax.js' ],
    jax: [ 'input/TeX', 'output/HTML-CSS' ],
    tex2jax: {
      inlineMath: [ ['$','$'], ['\\(','\\)'] ],
      displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
      processEscapes: true,
    },
    TeX: {
      extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js']
    }
  }}
  {...WebView props}
/>