React Native中react-native-math-view/react-native-mathjax-svg无法正常渲染LaTeX的问题求助

大家好！我最近在React Native项目里尝试渲染LaTeX数学公式，先后试了react-native-mathjax-svg和react-native-math-view两个库，但都没法正常工作，目前只有基于WebView的方案能跑通，但性能实在拉胯，想请教下社区的朋友们帮忙排查下问题，或者推荐更好的替代方案！

我尝试过的方案及遇到的问题 #

1. 使用react-native-mathjax-svg

我写了最简单的测试代码：

import React from 'react';
import { View } from 'react-native';
import MathJaxSvg from 'react-native-mathjax-svg';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <MathJaxSvg math={"\\(x^2 + y^2 = z^2\\)"} fontSize={20} color="black" />
    </View>
  );
};

export default App;

问题：屏幕上完全没有内容渲染，而且控制台一直在重复输出这条日志：

(NOBRIDGE) LOG  MathJaxSvg [Function MathJax]
It seems like the component is not bridging properly.

看起来这个组件的桥接环节出了问题？

2. 使用react-native-math-view

测试代码如下：

import React from 'react';
import { View, Text } from 'react-native';
import MathView from 'react-native-math-view';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Testing MathJax:</Text>
      <MathView math={"E = mc^2"} />
    </View>
  );
};

export default App;

问题：组件同样没有任何渲染，控制台抛出了这个警告：

Warning: React.jsx: type is invalid -- expected a string or function but got: undefined.

目前能用但不理想的方案 #

我试了用react-native-webview结合MathJax的方式，代码如下：

import React from 'react';
import { View, Text } from 'react-native';
import { WebView } from 'react-native-webview';

const mathJaxHTML = `
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" async 
    src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script type="text/javascript" async 
    id="MathJax-script" 
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
  <h1>Testing MathJax</h1>
  <p>
    \\( E = mc^2 \\)
  </p>
</body>
</html>
`;

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <Text>Testing MathJax in WebView:</Text>
      <WebView
        originWhitelist={['*']}
        source={{ html: mathJaxHTML }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        style={{ flex: 1 }}
      />
    </View>
  );
};

export default App;

这个方案确实能正常渲染公式，但WebView的开销太大了，如果要大规模渲染公式的话，性能会非常差，所以实在不想用这个方案。

我想请教的问题 #

• 为什么react-native-mathjax-svg和react-native-math-view这两个库都没法正常渲染？是不是我漏了什么额外的配置步骤？比如修改build.gradle或者手动链接原生模块？
• 有没有不依赖WebView的轻量替代方案，可以在React Native里高效渲染LaTeX公式？

我的开发环境 #

React Native Version: 0.73.3
react-native-mathjax-svg: 0.9.9
react-native-math-view: 3.9.5
Platform: Android & iOS
JavaScript Runtime: Hermes enabled

希望有经验的朋友能给点思路或者解决方案，非常感谢！🚀

备注：内容来源于stack exchange，提问作者Ajay Gaur