React Native WebView IOS Katex：本地语言文本显示为奇怪的字符

问题描述

我正在使用 React Native WebView 来显示来自 Katex 的 html 内容。我使用android设备进行了测试，它工作正常。但是当我在 IOS 设备上测试它时，本地文本显示不正确，而是出现了如下奇怪的字符。

我的表情：\frac{\textආරෝපණය}{\textස්කන්ධය} 您可以通过访问这个网站来测试这个表达式，它的工作正常：https://katex.org/

我的代码：

import React from 'react'
import { Dimensions } from 'react-native'
import { bool,func,object,string } from 'prop-types'
import { WebView } from 'react-native-webview'

function getContent(inlinestyle,expression,options) {
  return `<!DOCTYPE html>
<html>
  <head>
    <style>${inlinestyle}</style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
 
    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script> 
 
    <!-- To automatically render math in text elements,include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYoNowZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  <body>
    <script>
      window.onerror = e => document.write(e);
      document.addEventListener("DOMContentLoaded",function() {katex.render(${JSON.stringify(
        expression
      )},document.body,${JSON.stringify(options)});});
    </script>
  </body>
</html>
`
}

const defaultStyle = {
  height: 'auto',width: 'auto',backgroundColor: 'white',//'rgba(52,52,0)',//transparent background
  marginBottom: 5,}

//will center the KaTeX within our webview & view container
const defaultInlinestyle = `
html,body {
  margin: 0;
  padding: 0;
  display:flex;
  justify-content: center;
  align-items: center;
}
`

const { width } = Dimensions.get('window')

class Katex extends React.Component {
  render() {
    const {
      style,onLoad,onError,inlinestyle,...options
    } = this.props

    return (
      <WebView
        style={style}
        source={{
          html: getContent(inlinestyle,options),}}
        // onLoad={onLoad}
        onError={onError}
        renderError={onError}
      />
    )
  }
}

Katex.propTypes = {
  expression: string.isrequired,style: object,displayMode: bool,throwOnError: bool,errorColor: string,inlinestyle: string,macros: object,colorIsTextColor: bool,onLoad: func,onError: func,}

Katex.defaultProps = {
  displayMode: false,throwOnError: false,errorColor: '#f00',inlinestyle: defaultInlinestyle,style: defaultStyle,macros: {},colorIsTextColor: false,onLoad: () => {},onError: (e) => {
    console.error(e)
  },}

export default Katex

在安卓设备中运行良好的图像截图：

在 IOS 设备中无法正常工作的图像截图：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ios ios katex react-native react-native-webview unicode