发布了 npm 包 —— 最简单的 React Native LaTeX 公式渲染组件

21 Feb, 2026 #移动端开发

上一篇 blog 中，我实现了在 Webview 中渲染 LaTeX 公式，但是在实际使用中，创建大量的 Webview 用于渲染 LaTeX 公式的性能并不好，导致在滚动时/切换到一个有大量公式的页面时会出现卡顿的情况。
因此，我开发了一个基于 react-native-svg 的 npm 包，叫做 react-native-latex-text，它支持自动匹配公式并将 react-native 自带的 Text 组件与 Latex 公式混排，性能更强。

核心思路

由于 MathJax 依赖 DOM 环境，我们需要使用 MathJaxRenderer 组件在根节点创建一个隐藏的 1*1 的 WebView 组件，用于加载 MathJax 库和渲染公式。渲染完成后，WebView 内部通过 postMessage 将 svg-xml 字符串返回给 React Native，并使 react-native-svg 组件实现高性能渲染。
因此，这种渲染方式不依赖任何原生组件，可以直接在 Expo Go 中运行。

MathText 组件通过正则表达式将文本中的公式部分提取出来，分别渲染并计算行高，最后将普通文本与渲染后的公式拼接起来。

渲染效果

使用 MathText 组件在列表中渲染大量公式，cache missed 情况下依然流畅滑动

使用方法

初始化：

在项目的根节点（比如最外层的 _layout.tsx）中引入 MathJaxRenderer 组件，并用其 ref 初始化全局 MathRenderer：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// _layout.tsx
import React, { useRef } from 'react';
import { View } from 'react-native';
import { MathJaxRenderer, MathJaxRendererRef, MathRenderer, MathText } from 'react-native-latex-text';

export default function App() {
  // 1. 创建 MathJaxRenderer 引用
  const mathJaxRef = useRef<MathJaxRendererRef>(null);
  
  // 2. 初始化全局渲染器
  MathRenderer.Init(mathJaxRef);

  return (
    <View style={{ flex: 1, padding: 20 }}>
       {/* 3. 渲染器核心组件（隐藏式） */}
      <MathJaxRenderer 
        ref={mathJaxRef} 
        maxCacheSize={50} 
      />
    </View>
  );
}

渲染公式：

在项目的任意位置，直接使用 MathText 组件渲染带公式的文本：

1
2
3
4
5
6


import { MathText } from 'react-native-latex-text';

<MathText
  content='块级公式：求以下定积分的结果：\[\int_0^2 x^3 dx\]\n行内公式：计算电场强度\(\vec{E} = \frac{\vec{F}}{q}\)，若试探电荷\(q = 2×10^{-6}C\)，受到的电场力\(\vec{F} = 4×10^{-3}N\)，则电场强度的大小为？'
  textColor='#FFFFFF'
/>

快速开始

前往 Github 仓库 react-native-latex-text 查看详细文档和示例代码
前往 npm 仓库 react-native-latex-text 安装该包。