Native开发工具之应用开发编辑器&打包发布（一）

• Github 项目地址：Microsoft/vscode(https://github.com/Microsoft/vscode)

• 文档：

• 设置：https://code.visualstudio.com/docs

• 使用 Visual Studio Code 开发 React Native 应用：https://blogs.msdn.microsoft.com/visualstudio/2016/02/22/develop-reactnative-apps-in-visual-studio-code/

• 支持平台：Windows、Mac、Linux

• 特性：

• 内置 Git 命令

• 可扩展并且可定制

Visual Studio Code 是由 Microsoft 为 Windows、Linux 和 OS X 开发的源代码编辑器。它是免费和开源的，支持调试、嵌入式 Git 控件、语法高亮、智能代码补全、代码段和代码重构。

扩展

• ReactNative Tools - 此扩展为React Native 项目提供了开发环境。你可以调试代码，从命令终端快速运行 react-native 命令，并使用 IntelliSense 浏览 React Native API 的对象、函数和参数。 
  Vim编辑器

5. Vim 编辑器

• 官网：http://www.vim.org/

• Github 项目地址：vim/vim(https://github.com/vim/vim)

• 文档：

• Vim 文档：http://www.vim.org/docs.php

• 为 React-JSX 设置 Vim：https://jaxbot.me/articles/setting-up-vim-for-react-js-jsx-02-03-2015

• License：开源

• 支持平台：Mac、Linux

• 特性：

• 持久、多层次的撤销树

• 广泛的插件系统

• 支持数百种编程语言和文件格式

• 强大的搜索和替换功能

• 能够与许多工具集成

Vim 是一种高度可配置的文本编辑器，可以非常高效地创建和更改任何类型的文本。大多数 UNIX 系统都以 “vi” 的形式支持它。许多开发人员喜欢使用 Vim 进行各种编辑工作。Vim 非常稳定，并且在不断发展而变得更好。

Vim 插件

• vim-jsx - 提供 JSX 的语法高亮和缩进。
• vim-react-snippets - 一组为 Vim 打造的可与Facebook 的 React 库一起使用的片段。
• vim-babel - 一组为 Vim 打造的可与Facebook 的 React 库一起使用的片段。

6. GNU Emacs 编辑器

• 官网：https://www.gnu.org/software/emacs/

• 文档：

• 官方文档：https://www.gnu.org/software/emacs/documentation.html

• 针对 React Native 的初始设置：http://www.cyrusinnovation.com/initial-emacs-setup-for-reactreactnative/

• License：遵循 GPL

• 支持平台：Windows、Mac、Linux

• 特性：

• 内容感知编辑模式，包括语法着色，适用于多种文件类型。

• 完整的内置文档，包括新手教程。

• 支持几乎所有脚本语言的 Unicode 编码。

• 高度可定制，使用 Emacs Lisp 代码或图形界面。

• 具有用于下载和安装扩展的包系统。

GNU EMACS 是一个可扩展、可定制、免费、自由的文本编辑器。

扩展

• web-mode.el - 它是一个自主的 emacs 主模块，用于编辑 Web模板。它与许多语言兼容，包括 JSX（React）。

7. Spacemacs 编辑器

• 官网：http://spacemacs.org/

• Github 项目地址：syl20bnr/spacemacs(https://github.com/syl20bnr/spacemacs)

• 文档：

• 官方文档：http://spacemacs.org/doc/DOCUMENTATION.html

• License：开源

• 支持平台：Windows、Mac、Linux

• 特性：

• 密钥绑定使用助记符前缀进行组织

• 可发现 - 创新的实时显示可用的键绑定。

• 相似的功能具有与之相同的密钥

• 简单的查询系统可以快速找到可用的层、包等。

• 社区驱动的配置提供了强大的用户可调的包，bug 可被快速修复。

Spacemacs 是一个社区驱动的 Emacs 发行版 - 最好的编辑器既不是 Emacs 也不是Vim，它是 Emacs 和 Vim 相结合！

扩展

• React layer - 适用于 React 的 ES6 和 JSX 配置层。它将自动识别 .jsx 和 .react.js 文件。一个用于 React集成的包层。

8. Deco IDE

• 官网：https://www.decosoftware.com/

• Github 项目地址：decosoftware/deco-ide(https://github.com/decosoftware/deco-ide)

• 文档：

• 官方文档：https://www.decosoftware.com/docs

• 支持平台：Mac（仅适用于iOS）

• License：开源

• 特性：

• 组件搜索和插入

• 实时调整

• 新文件支架

Deco 是专为 React Native 打造的 IDE。它是一个用于编写 React Native 应用程序的一体化解决方案，无需任何环境设置即可下载和使用。Deco 专注于组件重用，并支持用户对 UI 的实时编辑，从而改进了React Native 开发工作流程。

9. WebStorm

• 官网：https://www.jetbrains.com/webstorm/

• 文档：

• 官方文档：https://www.jetbrains.com/webstorm/documentation/

• 使用外部工具：https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/

• License：收费（单个用户第一年需支付 129 美元）

• 支持平台：Windows、Mac、Linux

• 特性：

• 智能编码协助

• 支持最新技术

• 版本控制系统

• 无缝工具集成

• 调试、跟踪和测试

• 内置终端

WebStorm 建立在开源 IntelliJ 平台之上，JetBrains 已经开发和完善了15多年。它提供与 VSC、本地历史功能的紧密集成，具有充满活力的插件生态系统，是完全可配置的，还提供大量其他的功能。WebStorm 为 React 和 JSX 提供高级支持，并提供 React Native 应用程序的核心编码协助。

10. TextMate 编辑器

• 官网：https://macromates.com/

• 文档：

• 官方文档：http://manual.macromates.com/en/

• License：收费（单个用户 License 为48.75欧元）

• 支持平台：Mac

• 特性：

• CSS 选择器可确定操作和设置的范围

• 快速概述和导航功能弹出

• 可以把你最喜欢的脚本语言作为插件集成

• 从文档中运行 Shell 命令

• 代码高亮

• 可与 Xcode 协作并构建 Xcode 项目

TextMate 并不是 IDE，但是通过使用其强大的片段、宏和独特的范围界定系统，它通常可以提供即使是编程语言特定的 IDE 都缺乏的功能。React 不直接支持，但是借助下面的插件可以很容易地获得对大多数 React 代码所基于的 JSX 的支持。

插件

• javascript-jsx.tmbundle - 用于JSX（React）的 Textmate Bundle。目前支持语法高亮。

总结

所有代码编辑器都具有丰富而强大的功能。且其中的插件和扩展都可以适应 React Native 环境，因此在迁移到 React-Native 时，我们不必迁移到不同的代码编辑器。

二、react-native 打包流程

问题

react-native方便了移动端app组件的开发，但是其社区以来的expo jdk 在某些业务场景下不足以满足某些需求，我们需要将其与原生app进行整合，共同打包发布，但rn官方文档中对于此方面的描述并不详尽。

分析

使用react-native的开发者，大多数是没有原生开发经验的，而将react-native与原生应用进行整合则必须要对原生应用开发流程由一定了解，因此在条件允许的条件下，这部分工作可交由原生开发人员完成。
但是如果android工程师的条件无法满足，则需要前端工程师自己完成，幸好，这部分工作并不十分需要非常深入的原生知识，只需要了解构建工具的简单使用即可。

解决

在此以 android studio 为例来说明如何将react-native应用打包成android apk

1.创建react-native应用

create-react-native-app helloworld

2.将开发环境结构为可定制模式

yarn eject

3.打开android studio ,从当前目录下的android子目录导入应用

3.打包jsBundle

原生应用会提供js运行环境，因此实际上还是要将应用代码打包为一个js文件，实际运行时也是在js解释器的帮助下执行，也因此与原生应用存在一定的性能差距。
回到命令行执行以下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

4.打包apk

回到android studio 项目中，进行如下图所示的操作：

以上就是一个简单的打包react-native为android apk的过程，其中还有许多个性化的配置方案可供选择，比如是否允许开发模式等等，这些需要读者们自己去探索

参考：https://www.jianshu.com/p/c45148134082
https://blog.csdn.net/csdnnews/article/details/78042121

阿里P7移动互联网架构师进阶视频（每日更新中）免费学习请点击：https://space.bilibili.com/474380680

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于Flutter的学习思路及方向，从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。
由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的
还有高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
还有高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。**

[外链图片转存中…(img-MnTI6Htg-1715254725413)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！