如何使用MathJax在React Native应用中显示MathML方程？

Question

我尝试使用MathJax在我的react本机应用程序中显示MathML方程，但未显示。在下面的代码中，不显示方程式，仅显示“ Helloworld”。

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import MathJax from 'react-native-mathjax'

export default class TipsAndTricksScreen extends Component {
    static navigationOptions = {
        title: 'Tips And Tricks',
    };

    render() {
        return (

            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <MathJax math={String.raw`<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>7</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math>this is just a string`} />
                <Text>Helloworld</Text>
            </View>
        );
    }
}

Answer 1

实现依赖似乎很简单。在查看依赖关系的源代码时，它看起来就像是Webview的包装器，因此请注意，它可能仅在在线时才起作用。

依赖项已经为MathJax设置了一些默认选项，您可以使用mathJaxOptions道具传递更多选项。因此，如果我们通过

{
  jax: ['input/MathML']
} 

然后它应该告诉MathJax您正在传递MathML作为输入。

因此，这是一个使用react-native-mathjax

的简单组件

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import MathJax from 'react-native-mathjax';

const mmlOptions = {
    jax: ['input/MathML'],
};

class MathView extends Component {
  render () {
    return (
      <View style={{flex:1}}>
        <MathJax
          mathJaxOptions={mmlOptions}
          html={'<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>4</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math> this is just a string'}
        />
      </View>
    );
  }
}
export default MathView;

这会给你这样的东西

这应该足以让您入门。您可以通过mathJaxOptions道具传递其他选项。您只需要查看MathJax documentation，了解您可以通过的所有不同内容。

注意事项

在Android上，它看起来不像Android WebView可以渲染MathML，也许有一种配置可以使它工作，但我不知道，但是Android WebView确实可以渲染LaTex，因此也许将MathML转换为LaTex可能是您的后备选项。

Answer 2

如果要在React Native中呈现MathML，则需要一些扩展，当然也需要输入和输出方法。经过研究，我发现此解决方案特别适用于MML到HTML：

<MathJax
  html={`<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>7</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math>this is just a string`}
  mathJaxOptions={{messageStyle: 'none',
   extensions:    
  ['mml2jax.js','MathMenu.js','MathZoom.js','AssistiveMML.js','a11y/accessibility- 
  menu.js',],
   jax: ['input/MathML', 'output/CommonHTML'],
    tex2jax: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']],
      processEscapes: true,},
    TeX: {extensions:['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'],},}} />