Native开发工具之应用开发编辑器打包发布(一)

Nuclide 是基于 Atom 之上构建的单独的一个包,其提供可编程性且社区非常活跃。它为 React Native、Hack 和 Flow 项目提供一流的开发环境。

2. Atom

  • 官网:https://atom.io/

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

  • 文档:

  • 设置:http://flight-manual.atom.io/

  • Atom with React Native:https://blog.sendbird.com/tutorial-build-a-messaging-app-using-react-native/

  • 支持平台:Windows、Mac、Linux

  • Licence:开源

  • 特性:

  • 跨平台编辑

  • 内置包管理器

  • 智能自动补全

  • 文件系统浏览器

  • 多个窗格

  • 查找和替换

Atom 是一款现代化、易用、可控的文本编辑器。Atom 被开发人员广泛应用于多种编程语言。它有一个庞大而活跃的社区,诞生了很多有用的插件。

Atom 常用的包:

  • atom-react-native-autocomplete package - 该包针对 React-Native,为 Atom 编辑器提供自动补全功能。
  • atom-react-native-css - 这是​
    一个内置支持 SASS、SCSS 的 React-Native 组件的包。React-native-css 将有效的 CSS、SASS转换为 CSS 的 Facebook 子集。
  • react-native-snippets - 该包是 Atom和 Nuclide 的 React Native 片段。
  • zenchat-snippets - 它是react-native、redux 和 ES6 的片段集合。
  • atom-xcode - 用于集成 Mac Xcode 和 atom。安装之后,iOS 模拟器可以在 atom 内进行控制。
  • language-babel - 包含所有 JavaScript 版本的语法,包括 ES2016 和 ESNext、用于 Facebook React 的 JSX 语法、以及 Atom 的 etch。

3. Sublime Text

  • 官网:https://www.sublimetext.com/

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

  • 文档:

  • 设置:https://www.sublimetext.com/docs/3/

  • SublimeText for React Native:https://zaicheng.me/2016/06/20/react-native-initial-setup/

  • 为 React-JSX 开发设置 SublimeText:(http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/)

  • 支持平台:Windows、Mac、Linux

  • Licence:可以免费下载和试用,继续使用需购买 License。

  • 特性:

  • Goto Anything 功能

  • 多个选择

  • 命令终端

  • 分心自由模式

  • 拆分编辑

  • 即时项目开关

  • 插件 API

  • 可自定义任何东西

  • 跨平台

  • 设置 React Native:nitinh.com/2015/02/setting-sublime-text-react-jsx-development/

Sublime Text 是一个复杂的文本编辑器,可用于编写代码、做标记和编写普通文本。社区提供了大量的插件扩展其功能。Sublime Text 一直是开发人员最喜欢的编辑器。

Sublime Text 常用包

  • react-native-snippets - 用于 react native 的 Sublime Text 的片段集合
  • babel-sublime - 具有 React JSX 扩展的 ES6 JavaScript 的语法定义。

4. Visual Studio Code

  • 官网:https://code.visualstudio.com/

  • 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工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

资料⬅专栏获取
己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助**。

因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-iNWqEqXI-1719091892372)]一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

资料⬅专栏获取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/735854.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot-注解@PropertiySource读取外部属性文件

ConfigurationProperties和Value两个注解能从配置文件中获取数据,但是前面讲了他们是从全局配置文件中获取,且只能从全局配置文件中获取,那么如果是一些数值类的数据放在全局配置文件里,是不怎么合适的,我们往往会把他…

gitlab 获取指定分支下指定路径文件夹的解决方案

第一步: 获取 accessToken 及你的 项目 id : 获取 accessToken ,点击用户头像进入setting 按图示操作,第 3 步 填写你发起请求的域名。 获取项目 id , 简单粗暴方案 进入 你项目仓库页面后 直接 源码搜索 project_id, value 就…

QT自定义标题栏窗口其一:实现拖动及可拉伸效果

1、效果 2、核心代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent<

Android intent 打开链接跳转到外部浏览

前言: 各位同学大家好, 最近接到一个比较诡异的需求 ,不是通常的webview 加URL显示网页 是需要跳转到外部浏览器 ,我这边处理好了就分享给大家 效果图 : 点几就跳转到外部浏览器 如图 具体代码实现: 点击打开链接并跳转外部浏览器方法 public void openBrowser(Con…

算法刷题总结

1. 排序算法 1.1 快速排序算法 public abstract class Sort<T extends Comparable<T>> {public abstract void sort(T[] array);protected boolean less(T first, T two) {return first.compareTo(two) < 0;}protected void swap(T[] array, int i, int j) {T…

《人生苦短,我用python·四》pybind11多场景使用

引言 Pybind11作为一个强大的工具&#xff0c;不仅可以轻松地将简单的C函数和类暴露给Python&#xff0c;还可以处理更复杂的场景&#xff0c;比如支持C标准库容器、处理C异常、以及自定义数据结构的转换。本文将深入介绍Pybind11的一些高级用法&#xff0c;帮助你在实际项目中…

修复 pprof ---node_exproter访问漏洞(go-pprof-leak)

前言&#xff1a; ** 在Go语言中&#xff0c;pprof和debug包是用来检测和避免goroutine泄漏&#xff0c;避免导致goroutine泄漏&#xff0c;进而消耗大量系统资源。不过对于安全而言确又存在一定风险&#xff0c;** 风险&#xff1a; 通过node_exporter web发现 190.168.46.1…

Unity Meta Quest 开发:关闭 MR 应用的安全边界

社区链接&#xff1a; SpatialXR社区&#xff1a;完整课程、项目下载、项目孵化宣发、答疑、投融资、专属圈子 &#x1f4d5;教程说明 这期教程我将介绍如何在应用中关闭 Quest 系统的安全边界。 视频讲解&#xff1a; https://www.bilibili.com/video/BV1Gm42157Zi 在 Unity…

DVWA 靶场 Weak Session IDs 通关解析

前言 DVWA代表Damn Vulnerable Web Application&#xff0c;是一个用于学习和练习Web应用程序漏洞的开源漏洞应用程序。它被设计成一个易于安装和配置的漏洞应用程序&#xff0c;旨在帮助安全专业人员和爱好者了解和熟悉不同类型的Web应用程序漏洞。 DVWA提供了一系列的漏洞场…

VirtualBox虚拟机声音设置

最近发现VirtualBox创建的Windows 10和11虚拟机没有声音&#xff0c;但是另外一个Windows 7的虚拟机确有声音&#xff0c;检查对比了一下虚拟机的声音设置&#xff0c;发现是Host Audio Driver的设置不一样&#xff0c;Windows10和11的是Default&#xff0c;而Windows7的是Puls…

【C++】初始化列表、匿名对象、static成员、友元、内部类

文章目录 一、初始化列表构造函数体赋值初始化列表explicit关键字 二、匿名对象三、static成员四、友元友元函数友元类 五、内部类六、练习题 一、初始化列表 构造函数体赋值 实际上&#xff0c;构造函数的函数体内&#xff0c;并不是对 对象 初始化的地方&#xff0c;而是对…

html做一个雷达图的软件

要实现一个在线输入数据并生成雷达图的功能&#xff0c;可以使用HTML表单和JavaScript来处理用户输入的数据。以下是一个示例代码&#xff0c;演示了如何实现这个功能&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"…

C++初学者指南第一步---13.聚合类型

C初学者指南第一步—13.聚合类型 文章目录 C初学者指南第一步---13.聚合类型1. 类型分类&#xff08;简化&#xff09;2. 如何定义和使用3. 为什么选择自定义类型/数据聚合&#xff1f;4. 聚合类型初始化5.混合6. 复制7. 值和引用的语义8.聚合的向量(std::vector)9.最令人烦恼的…

文件创建与查看

touch touch命令用于创建一个新的文件。 语法&#xff1a;touch Linux路径 其中路径可以是相对路径、绝对路径或者特殊路径符都可以。 改图展示了通过 touch test.txt 命令创建了一个 test.txt文件&#xff0c;其中深色的代表文件夹&#xff0c;白色的代表文件。 使用 ls -lh…

React学习(二)——状态(数据)与状态修改

useState 在React中&#xff0c;useState 是一个非常重要的Hook&#xff0c;它允许你在函数组件中添加“状态”&#xff08;state&#xff09;。在传统的React类组件中&#xff0c;我们使用this.state来管理和更新组件的状态。然而&#xff0c;在函数组件中&#xff0c;由于它们…

一个关于空格的Sql Server面试题

引子 先上题目&#xff1a; 回答下面sql 的输出结果 declare s1 varchar(10) declare s2 varchar(10) set s1a b set s2a b if s1s2 select true 答案是 true 那么上面的 s1 和 s2 是否相等的呢&#xff1f; 我们再看看下面的sql declare s1 varchar(10) declare s2 …

鞋子分类数据集17399张69类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;17399 分类类别数&#xff1a;69 类别名称:[“0”,“1”,“2”,“3”,“4”…

计组_指令的执行过程

2024.06.19&#xff1a;计算机组成原理指令的执行过程学习笔记 第18节 指令的执行过程 8.1 指令周期8.2 指令的执行过程8.2.1 取指令8.2.2 译码8.2.3 根据源操作地址计算并取操作数8.2.4 执行数据操作8.2.5 目的操作数地址计算并存结果 8.3 指令的数据流8.3.1 取值周期的数据流…

切换国内yum源

切换国内yum源 一、备份现有YUM源二、下载新的YUM源配置文件三、先清理YUM缓存再生成四、测试新的YUM源五、重启系统服务(生效可以不重启)可选 首先&#xff0c;切换国内YUM源的具体步骤取决于您使用的Linux发行版和当前的YUM源配置。以下是一般步骤&#xff0c;适用于大多数基…

CSS基础学习记录(5)

目录 1、CSS语法 2、实例 3、CSS注释 4、id 选择器 5、class 类选择器 6、标签选择器 7、内联选择器 1、CSS语法 CSS 规则由两个主要的部分构成&#xff1a;选择器&#xff0c;以及一条或多条声明: 选择器&#xff08;Selector&#xff09;通常是您需要改变样式的 HTML …