GVKun编程网logo

React Native WebView IOS Katex：本地语言文本显示为奇怪的字符（react native text）

2

针对ReactNativeWebViewIOSKatex：本地语言文本显示为奇怪的字符和reactnativetext这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展Editor.mdv1.

针对React Native WebView IOS Katex：本地语言文本显示为奇怪的字符和react native text这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展Editor.md v1.0 发布，改用 KaTeX，性能大幅改进、Expo React-native Webview - 如何在 webview 中启动相同的外部 url？、iOS react-native-webview 不显示带有外部 javascript 的本地 html、ios – React native error – react-native-xcode.sh:line 45：react-native：command not found命令/ bin/sh失败,退出代码127等相关知识，希望可以帮助到你。

本文目录一览：

React Native WebView IOS Katex：本地语言文本显示为奇怪的字符（react native text）

React Native WebView IOS Katex：本地语言文本显示为奇怪的字符（react native text）

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

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

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

我的代码：

  1. import React from ''react''
  2. import { Dimensions } from ''react-native''
  3. import { bool,func,object,string } from ''prop-types''
  4. import { WebView } from ''react-native-webview''
  6. function getContent(inlinestyle,expression,options) {
  7.   return `<!DOCTYPE html>
  8. <html>
  9.   <head>
  10.     <style>${inlinestyle}</style>
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
  12.  
  13.     <!-- The loading of KaTeX is deferred to speed up page rendering -->
  14.     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script> 
  15.  
  16.     <!-- To automatically render math in text elements,include the auto-render extension: -->
  17.     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYoNowZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
  18.         onload="renderMathInElement(document.body);"></script>
  19.   </head>
  20.   <body>
  21.     <script>
  22.       window.onerror = e => document.write(e);
  23.       document.addEventListener("DOMContentLoaded",function() {katex.render(${JSON.stringify(
  24.         expression
  25.       )},document.body,${JSON.stringify(options)});});
  26.     </script>
  27.   </body>
  28. </html>
  29. `
  30. }
  32. const defaultStyle = {
  33.   height: ''auto'',width: ''auto'',backgroundColor: ''white'',//''rgba(52,52,0)'',//transparent background
  34.   marginBottom: 5,}
  36. //will center the KaTeX within our webview & view container
  37. const defaultInlinestyle = `
  38. html,body {
  39.   margin: 0;
  40.   padding: 0;
  41.   display:flex;
  42.   justify-content: center;
  43.   align-items: center;
  44. }
  45. `
  47. const { width } = Dimensions.get(''window'')
  49. class Katex extends React.Component {
  50.   render() {
  51.     const {
  52.       style,onLoad,onError,inlinestyle,...options
  53.     } = this.props
  55.     return (
  56.       <WebView
  57.         style={style}
  58.         source={{
  59.           html: getContent(inlinestyle,options),}}
  60.         // onLoad={onLoad}
  61.         onError={onError}
  62.         renderError={onError}
  63.       />
  64.     )
  65.   }
  66. }
  68. Katex.propTypes = {
  69.   expression: string.isrequired,style: object,displayMode: bool,throwOnError: bool,errorColor: string,inlinestyle: string,macros: object,colorIsTextColor: bool,onLoad: func,onError: func,}
  71. Katex.defaultProps = {
  72.   displayMode: false,throwOnError: false,errorColor: ''#f00'',inlinestyle: defaultInlinestyle,style: defaultStyle,macros: {},colorIsTextColor: false,onLoad: () => {},onError: (e) => {
  73.     console.error(e)
  74.   },}
  76. export default Katex

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

Screenshot of image that works fine in android:

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

Screenshot of image that does not work fine in IOS

Editor.md v1.0 发布，改用 KaTeX，性能大幅改进

Editor.md v1.0 发布，改用 KaTeX，性能大幅改进

Editor.md v1.0 正式版发布，改用 KaTeX，性能大幅改进。

主要更新：

  • 新建分支 mathjax-version，但不打算继续对此分支进行开发；

  • 移除MathJax，改用KaTeX#2，解析和预览响应速度大幅度提高#3；

    • 移除 mathjax 配置项；

    • 移除 mathjaxURL 属性；

    • 移除 setMathJaxConfig() 方法；

    • 移除 loadMathJax() 方法；

    • 移除MathJax的所有示例；

    • 新增 tex 配置项，表示是否开启支持科学公式TeX，基于KaTeX；

    • 新增 katexURL 属性；

    • 新增 loadKaTeX 方法；

    • 新增KaTeX的示例；

  • setCodeEditor()方法更名为setCodeMirror()；

  • 合并CodeMirror使用到的多个JS模块文件，大幅减少HTTP请求，加快下载速度；

    • 新增合并后的两个模块文件：./lib/codemirror/modes.min.js、./lib/codemirror/addons.min.js；

    • Gulpfile.js 新增合并CodeMirror模块文件的任务方法codemirror-mode和codemirror-addon；

    • 另外在使用Require.js时，因为CodeMirror的严格模块依赖的限制，不能使用上述合并的模块文件，仍然采用动态加载多个模块文件；

  • 更新 README.md 等相关文档和示例；

  • 解决Sea.js环境下Raphael.js无法运行导致不支持流程图和时序图的问题，即必须先加载Raphael.js，后加载Sea.js；


Editor.md

A simple online markdown editor.

Editor.md 是一个基于jQuery和CodeMirror构建的在线Markdown文档编辑器。

editormd-screenshot

Expo React-native Webview - 如何在 webview 中启动相同的外部 url？

Expo React-native Webview - 如何在 webview 中启动相同的外部 url？

如何解决Expo React-native Webview - 如何在 webview 中启动相同的外部 url？

所以我完成了一个 web 应用程序，最近学习了 React-native，所以我可以为 android 和 ios 构建我的 web 应用程序。所以从 EXPO 项目中，我构建了两个应用程序并在商店中成功发布。简而言之，如果我在 https://example.com/vendor/?Vendor=5 上共享链接，并且客户已安装该应用程序，它应该在此 WebView 中启动相同的链接，我需要什么 到目前为止，我已经使用了 ios 的关联域和 android 的 IntentFilters，但是，当点击链接时，两者都只是打开应用程序。与您从启动器打开它完全一样，如果您之前使用过该应用，然后访问 WhatsApp 或 Twitter 并单击该链接，它只会以相同的状态打开该应用。

所以从这个链接 https://example.com/vendor/?Vendor=5 显然你将打开一个名为 vendor 的页面，并且查询应该像 $_GET[] 一样传递到页面，这当然是在浏览器中完成的，

现在如何做同样的事情或如何将这个链接原样传递给 WebView

iOS react-native-webview 不显示带有外部 javascript 的本地 html

iOS react-native-webview 不显示带有外部 javascript 的本地 html

如何解决iOS react-native-webview 不显示带有外部 javascript 的本地 html

我正在使用 react-native-webview 构建一个 react-native 应用程序，该应用程序加载本地 HTML 文件，javascript 包括指向外部网站。这在 ANdroid 中工作得很好，但在 iOS 中，这无法显示页面。该页面包含一个带有相关外部 javascript 的请求表单，以及一个加载最近播放歌曲的最近播放列表 javascript。所以 require() 上的源代码不会工作，因为它不是静态页面，而是来自外部文件。

我喜欢这个 stackoverflow 中提出的解决方案：react native webview load from device local file system

然而，它没有奏效。 webview 页面保持空白。

这里是带有 webview 的 js 代码的代码片段：

  1.    const  source = Platform.OS === ''ios''
  2.           ?  ''../html/request.bundle/requestPage.html''
  3.           : ''file:///android_asset/requestPage.html'';
  5.     return (
  6.       <WebView
  7.         style={styles.htmlcontainer}
  8.         originWhitelist={[''*'']}
  9.         javaScriptEnabled={true}
  10.         domStorageEnabled={true}
  11.         ref={(ref) => { this.webview = ref; }}
  12.         source={{ uri: source }}
  13.         allowFileAccess={true}
  14.         onNavigationStateChange={(event) => {
  15.           if (event.url !== source) {
  16.             this.webview.stopLoading();
  17.             // Linking.openURL(event.url);
  18.           }
  19.         }}
  20.       />
  21.     );
  22.   }
  23. }

以及位于 react/html/request.bundle/requestPage.html 的 html 文件 requestPage.html 的主要片段：

  1. <body>
  2.                    <form class="cc_request_form" data-username="rockitbr" >
  3.                        <div data-type="result" style="font-size:40px;background-color:transparent;color:#FFFFFF;">
  4.                        </div>
  5.                        <text style="color:#F2DBB6;font-size:40px">Song artist:</text><br />
  6.                        <input type="text" autofocus name="request[artist]" maxlength="127"
  7.                             style="margin-top:6px; margin-bottom:25px;border:3px solid white;border-radius:2px;
  8.                                   background-color:transparent;color:#FFFFFF;
  9.                                   padding:8px 15px;font-size:40px;Box-sizing:border-Box;width:100%;
  10.                                   caret-color:#FFFFFF;" />
  12.                        <br /><text style="color:#F2DBB6;font-size:40px">Song title:</text><br />
  13.               
  14. ...
  15. ...
  16.        <script language="javascript" type="text/javascript" src="https://cast1.asurahosting.com:2199/system/recenttracks.js"></script>
  17.        <script language="javascript" type="text/javascript" src="https://cast1.asurahosting.com:2199/system/request.js"></script>
  18.    </body>

我在 iOS 的 oneline 源值上尝试的内容包括： file:///../html/request.bundle/requestPage.html 和 ../html/request.bundle/requestPage.html

在采用上述 stachoverflow 链接（解决方案 #4）中的解决方案之前，我尝试了 source=[require(''../html/request.bundle/requestPage.html'')}

当我使用上述源分配代码中的路径时，这适用于 android。 有人可以帮忙吗？？

ios – React native error – react-native-xcode.sh:line 45：react-native：command not found命令/ bin/sh失败,退出代码127

ios – React native error – react-native-xcode.sh:line 45：react-native：command not found命令/ bin/sh失败,退出代码127

尝试构建任何(新的或旧的)项目时出现此错误.
我的节点是版本4.2.1,react-native是版本0.1.7.
我看过其他有相同问题的人,所以我已经更新了本机的最新版本,但是我仍然无法通过 xcode构建任何项目.

解决方法

要解决此问题,请使用以下步骤：

>使用节点版本v4.2.1
> cd进入[你的应用] / node_modules / react-native / packager
> $sh ./packager.sh(出于某种原因,运行正常)
>进入XCode并转到Build Phases选项卡.
删除列表中的最后一项(运行脚本的项目).所以你留下了Target Dependencies,Compile Sources,Link Binary With Libraries和copy Bundle Resources.

现在点击XCode中的build.由于shell脚本不再是XCode构建例程的一部分,因此它不应该失败.如果你在另一个终端窗口中运行react本机客户端服务器,那么一切都应运行正常.

关于React Native WebView IOS Katex：本地语言文本显示为奇怪的字符和react native text的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于Editor.md v1.0 发布，改用 KaTeX，性能大幅改进、Expo React-native Webview - 如何在 webview 中启动相同的外部 url？、iOS react-native-webview 不显示带有外部 javascript 的本地 html、ios – React native error – react-native-xcode.sh:line 45：react-native：command not found命令/ bin/sh失败,退出代码127的相关信息，请在本站寻找。

本文标签：

上一篇使用 MediaPlayerKit 进行视频聊天时没有麦克风音频 - Agora.io iOS SDK（视频显示麦克风没有声音）

下一篇Javascript clipboard.readText() 在 IOS Safari 中不起作用？（safari里的javascript）

相关文章