资讯专栏INFORMATION COLUMN

React Native 的开发工具:Nuclide

happyfish / 1998人阅读

摘要:也没有一个比较好的方式运行的服务每次的时候都需要启动一个的服务,这样就会降低开发的效率。还好有是专门为开发的。拥有更好的语法补全,类型检查等其实是在的基础上的一系列的插件集,是打造的下一代编程开发利器,是一个完全用开发的编辑器。

做React Native开发的时候,没有一个好用的IDE,Android Studio打开Android下的项目还可以,JS部分的代码打开并不方便,xcode大家OC项目还可以,对于其他的语言也不友好。也没有一个比较好的方式运行React Natvie的服务,每次Run的时候都需要启动一个React Native的服务,这样就会降低开发的效率。
还好有Nuclide,Nuclide是Facebook专门为React开发的IDE。Nuclide拥有更好的语法补全,类型检查等,Nulide其实是在Atom的基础上的一系列的插件集,Atom是Github打造的下一代编程开发利器,是一个完全用JavaScript开发的编辑器。
首先要先安装Atom,下载地址:https://atom.io/

安装Nuclide

通过apm可以安装Atom的插件

apm install nuclide

Installing nuclide to /Users/***/.atom/packages [BABEL] Note: The code generator has deoptimised the styling of "/Users/jjz/.atom/packages/nuclide/pkg/nuclide/debugger/atom/VendorLib/devtools/front_end/cm/codemirror.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "/Users/***/.atom/packages/nuclide/pkg/nuclide/debugger/atom/VendorLib/devtools/front_end/elements/StylesSidebarPane.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "/Users/***/.atom/packages/nuclide/pkg/nuclide/hack/VendorLib/hh_ide.js" as it exceeds the max of "100KB".
[BABEL] Note: The code generator has deoptimised the styling of "/Users/***/.atom/packages/nuclide/pkg/nuclide/react-native-inspector/VendorLib/dev-tools/standalone.js" as it exceeds the max of "100KB".
✓

重新打开Atom,可以看到Nulibe的主界面:

加载React Native 工程

右上角的菜单里面:
Add Porject Folder 可以加载本地的React Native项目。
Add Remote Project Folder可以加载远程的git的项目。
加载下本地已经存在的React Natvie的项目:

可以看到React Native的文件目录:

可以方便的修改JavaScript,Java和Object-c代码,对于这三种代码都有比较友好的代码提示。

React Native服务

使用 command+shift+p可以看到命令菜单,这里可以启动React Native的服务。
启动服务:

还可以通过Nulide React Natvie:Start Debugging启动debugging:

运行项目

现在我们已经启动了React Native的服务,直接在项目目录下面运行:

react-native run-ios
react-native run-android

可以直接运行到ios设备和android设备上。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78755.html

相关文章

  • React Native植入原生Android应用流程解析

    摘要:在应用内添加依赖回到,到的文件级别的里添加依赖最后一行的就是我们新增的,注意这里的版本号要和里的一致。因此,建议用这样的写法,并检查版本号是否和里的一致。 引言 React Native是现在移动开发新的可选方案,也带来了原属于Web领域的React的优秀开发特性。另一方面,React Native的技术栈一经掌握,可以用于iOS、Android及Windows(见此)多个平台,即所说...

    worldligang 评论0 收藏0
  • ReactJS新闻 #20 React Conf 2017主题演讲

    摘要:新闻第期新闻主题演讲与分别负责开场的部份,首先对自年来的发展情况讲演,以及近年来的成长趋势。会议视频网址官网以卡通图画介绍是即将上市的新核心,也是本次的重点发表技术之一,用了卡通画方式,来解说的设计与改进之处。 ReactJS新闻 第020期 (2017.03.19) 新闻 React Conf 2017主题演讲 Tom、Jing与Sebastian分别负责开场的keynote部份,...

    pkhope 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<