React Native + Visual Studio Code / Monaco Editor 制作手机编辑器

栏目: ASP.NET · 发布时间: 7年前

内容简介:React Native + Visual Studio Code / Monaco Editor 制作手机编辑器

因为想为 Growth 3.0 (GitHub: https://github.com/phodal/growth-ng )里添加一个练习功能,便想要这样的话,就需要一个代码编辑器——是的,我又要定制一个编辑器了。能想到最简单的方案就是:基于 WebView。而,我想要大致的功能就是:

  • 可以用 React Native 传递代码到 WebView 里
  • 点击 React Native 上的按钮,就可以运行 WebView 里的代码

便想到了 VS Code 背后的 Monaco Editor,其架构师为大名鼎鼎的「GoF 设计模式」作者之一 Erich Gamma。

因此,我要做的无非就是:

  • 集成 Monaco Editor
  • 制定一个简单的代码运行机制、消息规范
  • 处理一些特殊的函数,如 console.log

React Native 集成 Monaco Editor

这一步倒是比较简单:从官网下载一个 Demo 即可,然后按示例,配置一下就可以了:

require.config({paths: {'vs': './vs'}});

    require(['vs/editor/editor.main'], function() {
      var editor = monaco.editor.create(document.getElementById('container'), {
        value: [
          'function x() {',
          '\tconsole.log("Hello world!");',
          '}'
        ].join('\n'),
        language: 'javascript'
      });
    });

而,为了支持中文,则还需要加上几句代码:

require.config({
    'vs/nls' : {
      availableLanguages: {
        '*': 'zh-cn'
      }
    }
  });

然后在我们的 RN 代码中,引入这个 WebView 即可:

render = () => {
    let source;
    if (__DEV__) {
      source = require('./GrEditor/index.html');
    } else {
      source = Platform.OS === 'ios' ? require('./GrEditor/index.html') : { uri: 'file:///android_asset/GrEditor/index.html' };
    }

    return (
      <WebView
        ref={(webview) => {
          this.webview = webview;
          EditorWebViewServices.setWebView(webview);
        }}
        startInLoadingState
        source={source}
        onMessage={this.handleMessage}
        automaticallyAdjustContentInsets={false}
        style={[AppStyles.container, styles.container, { height: this.state.visibleHeight }]}
      />
    );
  }

然后,我们就需要制定一个简单的代码运行机制。

RN 触发 Monaco Editor 事件

当我们在原生界面上点击运行时,我们只需要 postMessage 过去即可:

static runCode() {
    EditorWebViewServices.getWebView().postMessage(JSON.stringify({
      action: 'runCode',
      code: {},
    }));
  }

然后在 WebView 里处理对应的 Action:

document.addEventListener('message', function (event) {
      var data = JSON.parse(event.data);
      if(data.action === 'runCode') {
        eval(window.editor.getValue());
      }
    });

这里的 window.editor.getValue() 可以获取到 Monaco Editor 中的代码,为了方便我就暂时直接用 eval 函数了,啊哈哈哈~~。

这样一来,代码勉强算是可以工作了。

React Native 与 Monaco Editor 处理 console.log

在测试的过程中,我发现了 console.log 是没有地方输出的,想自己定制一个 Console.log 界面,发现还挺麻烦的。于是,就想到了用 Toast 来显示——于是,我便在 WebView 里覆盖住了系统的 console.log,改成了直接 postMessage:

window.console.log = function(options) {
    var result = {
      action: 'console',
      data: options,
    };
    window.postMessage(JSON.stringify(result));
  };

而在 React Native 的组件里,则也是对数据进行对应的处理:

handleMessage = (event: Object) => {
    const message = JSON.parse(event.nativeEvent.data);
    if (message.action === 'console') {
      if (isObject(message.data)) {
        Toast.show(JSON.stringify(message.data));
      } else {
        Toast.show(message.data.toString());
      }
    }
  };

可这样,还是有个问题,我测试了一个 for 循环,结果发现只显示最后一个值。不过,我相信没有太多的用户会用它来写简单的代码。

React Native Monaco Editor 屏幕旋转

同理的,后来在处理屏幕也是相似的,在 RN 里监听屏幕旋转:

orientationDidChange = () => {
    EditorWebViewServices.getWebView().postMessage(JSON.stringify({
      action: 'resize',
    }));
  };

然后在 WebView 里处理:

document.addEventListener('message', function (event) {
      var data = JSON.parse(event.data);
      if(data.action === 'runCode') {
        eval(window.editor.getValue());
      }

      if(data.action === 'resize') {
        window.editor.layout();
      }
    });

周末就这么过去了,有人要来一起填坑吗?


以上所述就是小编给大家介绍的《React Native + Visual Studio Code / Monaco Editor 制作手机编辑器》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

移动互联网商规28条

移动互联网商规28条

王吉斌、彭盾、程成 / 机械工业出版社 / 2014-6 / 49.00

每一次信息技术革命都会颠覆很多行业现有的商业模式和市场规则,当前这场移动互联网变革的波及面之广和蔓延速度之快,完全超出我们的想象。行业的边界被打破并互相融合,在此之前,我们只面临来自同行业的竞争,但是今天,我们不知道竞争对手会来自哪里。也许今天我们还是行业的巨人,但是明天就会被踩在脚下,当我们的体温犹热时,新的巨人已经崛起。诺基亚等传统科技巨头的衰退告诉我们,企业在一个时代的优势,到了另外一个新时......一起来看看 《移动互联网商规28条》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码