Как отобразить уравнение MathML в приложении React Native с помощью MathJax? - PullRequest
Новая
       23

Как отобразить уравнение MathML в приложении React Native с помощью MathJax?

0 голосов
/ 18 декабря 2018

Я пытался отобразить уравнение MathML в своем собственном приложении реакции, используя MathJax, но оно не отображается.В приведенном ниже коде уравнение не отображается, только «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>
        );
    }
}

1 Ответ

0 голосов
/ 18 декабря 2018

Кажется, довольно просто реализовать зависимость.Глядя на исходный код зависимости, кажется, что это всего лишь обертка вокруг WebView, поэтому просто имейте в виду, что она, вероятно, будет работать, только если вы находитесь в сети.

В зависимости есть некоторые параметры по умолчанию, уже установленные для MathJax, и вы можете передать дополнительные параметры, используя mathJaxOptions prop.Поэтому, если мы передадим 

{
  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;

Это даст вам что-то вроде этого

enter image description here

Этого должно быть достаточно, чтобы начать работу.Вы можете передать дополнительные опции через mathJaxOptions prop.Вам просто нужно посмотреть MathJax документацию для всех различных вещей, которые вы можете передать.

Предостережение

На Android не похоже, что Android WebView может отображать MathML, возможно, есть конфигурация, которая заставит его работать, но я не знаю этогооднако Android WebView действительно отображает LaTex, поэтому, возможно, преобразование вашего MathML в LaTex может стать для вас альтернативным вариантом.

...