`
weitao1026
  • 浏览: 1062574 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论
阅读更多

接触一门新的语言,第一是看开发文档,第二自然就是开发工具啦。但是RN是facebook开源的一个框架,要用什么来编写我们的代码才能觉得爽呢。

NO1:当然是目前世界非常流行的脚本编辑器Sublime

 


sublime3

我们在开发RN之前需要为sublime加载几个插件。

1、package controller

操作:使用快捷键  ctrl+` 或者是  View>Show Console  控制台,把下面的内容复制后回车,安装成功后重新启动sublime

sublime3

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

sublime2

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

接下来我们按 快捷键 shift + commad + p 打开package controller

 


 

输入package controller:install package 回车,然后输入我们要的插件就可以install下来了。非常方便。

2、React-native-snippets


 

这个插件快速搭建一个RN开发环境还有一些生命周期的语法。(具体操作请看https://packagecontrol.io/packages/react-native-snippets)

3、sublime-react

RN是基于React.js的,JSX语法高亮!

4、babel

babel插件支持ES6语法和JSX语法,要比sublime-react看起来更舒服。出现问题也会提示。


 

到这里react-native的开发工具环境就搭建完成啦!

NO2:Atom

 


Atom

 

6月15日Atom1.0正式发布,3月份Facebook宣布为React和React-native开发并开源一款基于Atom的IDE--nuclide ,很高兴,6月22日在nuclide.io 测试版发布。相信过不了多久,一款强大的RN编辑器就出来了。(RN狗福音!) (进过测试,Atom在install nuclide之后会变得很卡,目前不建议各位尝试!请耐心等待)

Atom的操作流程跟sublime基本差不多。这里就不做说明!

接下来将会开始第一个小项目:react-native开发一个登录界面。

分享到:
评论

相关推荐

    react-ReactProto适用于开发人员和设计人员的React应用程序原型开发工具

    React-Proto是一款强大的工具,专为开发人员和设计人员打造,用于快速构建React应用程序的原型。这个工具简化了React应用的早期开发阶段,允许用户在实际编码之前快速实验和迭代设计概念。它提供了直观的界面和工作...

    react-reactimagecrop一个React的响应式图片裁剪工具

    总结,`react-image-crop`是一个强大且易用的React图片裁剪工具,它的响应式特性、丰富的功能和简单的API使其成为构建图片编辑应用的理想选择。通过学习和使用这个组件,开发者可以为他们的React应用增添高质量的...

    react-reactcanvas一个高性能canva渲染的React组件

    综上所述,`react-canvas`是一个强大的工具,它将React的便利性与Canvas的高性能结合,为开发者提供了一个构建高性能图形界面的新途径。通过学习和掌握`react-canvas`,开发者可以更高效地构建出具有丰富视觉效果的...

    react-reactjsonschemaform一个React组件用于从JSONSchema构建Web表单

    总的来说,`react-jsonschema-form`是React开发中一个强大的工具,对于处理表单逻辑和数据验证提供了便利。通过利用JSONSchema的灵活性和强大的功能,它可以帮助开发者提高开发效率,同时保持代码的整洁和可维护性。

    适用于 Android 和 iOS 的 React Native NFC 模块 react-native-nfc

    灵感来自phonegap-nfc和react-native-ble-manager 该库最简单(也是最常见)的用例是读取NFC包含 的标签NDEF,可以通过以下代码实现: import React from 'react'; import {View, Text, TouchableOpacity, ...

    react-devtools开发工具

    react-devtools开发工具。具体可看文章:http://t.csdn.cn/GNNXK

    react-React水印组件支持图片水印文字水印

    使用命令行工具执行 `npm install react-watermark-module` 或 `yarn add react-watermark-module`。 2. **引入**:在你的React组件中,导入水印模块,例如 `import Watermark from 'react-watermark-module';` 3. *...

    react-native 相册(全选、删除、分享)

    在React-Native开发中,创建一个能够展示本地图片和视频,并提供全选、删除和分享功能的相册应用是一项常见的需求。以下将详细介绍如何利用React-Native实现这些功能。 首先,`react-native`是一个用于构建原生移动...

    react-native-debugger

    "react-native-debugger"是一款专为React Native开发者设计的强大调试工具,尤其适用于使用较旧版本如0.12.1的React Native项目。这个工具允许开发者深入到应用程序的JavaScript层进行调试,提供了一种直观的方式来...

    react-reactcolor颜色点选器来自SketchPhotoshopChrome等

    在实际开发中,`react-color`广泛应用于设计工具、图像编辑、UI配置器、主题定制等场景。例如,它可以用于一个网页编辑器,让用户自由选择文本、背景或边框颜色;也可以用在一款配色工具中,帮助用户创建调色板;...

    react-native-vector-icons的简单使用

    在React Native开发中,`react-native-vector-icons`库是一个非常重要的工具,它允许开发者在应用中集成各种高质量的矢量图标。这个库包含了多种图标集,如FontAwesome、Ionicons、Material Icons等,使得UI设计更加...

    react.js、react-dom.js、babel.js文件包下载

    React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前,让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...

    react-tools开发工具扩展程序包

    总的来说,React Tools作为一款Chrome扩展程序,通过提供源码映射、组件树查看、性能分析和错误处理等多种工具,极大地便利了React应用的开发和调试。它不仅简化了开发者的工作流程,还促进了代码质量和性能的提升。...

    react-reactstickyReact最强大可用的粘性库

    总结,React-sticky是React开发中一个实用的工具,它简化了实现页面元素粘性效果的过程,同时提供了丰富的配置选项以适应不同的需求。通过深入理解其工作原理和使用方法,开发者可以更好地利用这个库来提高项目的...

    react-native boost 依赖 2019.zip

    React-Native Boost 是一个优化工具,专为提升React-Native应用的性能而设计。这个压缩包文件"react-native boost 依赖 2019.zip"包含了2019年时React-Native Boost所需的环境依赖,旨在帮助开发者解决在运行`react-...

    react-创建react应用的Cli工具createreactapp的可配置版本

    roadhog 是一个 cli 工具,提供 server、 build 和 test 三个命令,分别用于本地调试和构建,...命令行体验和 create-react-app 一致,配置略有不同,比如默认开启 css modules,然后还提供了 JSON 格式的配置方式。

    前端开源库-html-react-parser

    总结来说,`html-react-parser`是一个不可或缺的工具,它极大地简化了前端开发中HTML字符串与React组件之间的转换,提高了开发效率和代码的安全性。对于处理HTML数据或构建动态内容的React应用,它是理想的解决方案...

    react-reactjsontreeReactJSON查看器组件提取自reduxdevtools

    总的来说,`react-json-tree`是React开发中的一个实用工具,它简化了JSON数据的展示,提升了开发效率,并且在各种场景下都能发挥出色的作用。无论是作为调试工具还是用户界面的一部分,它都能提供清晰、友好的数据...

    react-native官方demo

    React-Native是Facebook开发的一款开源框架,它允许开发者使用JavaScript和React来构建原生移动应用程序。这个"react-native官方demo"包含的是React-Native源码仓库的主分支,即`react-native-master`,通常包含了...

    携程是如何去做React-Native优化的

    3. 技术支持和文档:携程针对React-Native技术团队提供了技术支持和工具,确保开发者能够更加高效地处理和解决在开发过程中遇到的问题。同时,为社区提供了丰富的文档和控件,方便开发者查阅和复用。 4. 优化的API...

Global site tag (gtag.js) - Google Analytics