接触一门新的语言,第一是看开发文档,第二自然就是开发工具啦。但是RN是facebook开源的一个框架,要用什么来编写我们的代码才能觉得爽呢。
NO1:当然是目前世界非常流行的脚本编辑器Sublime
我们在开发RN之前需要为sublime加载几个插件。
操作:使用快捷键 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下来了。非常方便。
这个插件快速搭建一个RN开发环境还有一些生命周期的语法。(具体操作请看https://packagecontrol.io/packages/react-native-snippets)
RN是基于React.js的,JSX语法高亮!
4、babel
babel插件支持ES6语法和JSX语法,要比sublime-react看起来更舒服。出现问题也会提示。
到这里react-native的开发工具环境就搭建完成啦!
NO2: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开发一个登录界面。
相关推荐
├─1113_AM_React-basic-1.mp4 ├─1113_AM_React-basic-2.mp4 ├─1113_AM_React-basic-4.mp4 ├─1113_PM_React-basic-3.mp4 ├─1114_AM_React-basic-5.mp4 ├─1114_AM_React-basic-6.mp4 ├─1114_PM_React-...
灵感来自phonegap-nfc和react-native-ble-manager 该库最简单(也是最常见)的用例是读取NFC包含 的标签NDEF,可以通过以下代码实现: import React from 'react'; import {View, Text, TouchableOpacity, ...
react-devtools开发工具。具体可看文章:http://t.csdn.cn/GNNXK
React-Native-SmartRefreshLayout是基于Android SmartRefreshLayout 开发的插件 ,可提供类似ios的弹性刷新,该插件可完全使用React Native进行自定义 HeaderComponent现在支持任意的RN组件,但是需要放在AnyHeader的...
react-resizable-and-movable - 可调整大小、可拖动的React
roadhog 是一个 cli 工具,提供 server、 build 和 test 三个命令,分别用于本地调试和构建,...命令行体验和 create-react-app 一致,配置略有不同,比如默认开启 css modules,然后还提供了 JSON 格式的配置方式。
react-resizable-box - 可调整大小的React组件
react-jsonschema-form - 一个React组件用于从JSONSchema构建Web表单
react-draggable - React可拖拽组件
react-katex:利用KaTeX和ReactJS展示数学公式
React-Proto:适用于开发人员和设计人员的React应用程序原型开发工具
使用npx create-react-app脚手架创建工程环境 基于 React(16.8) react-redux react-router redux-thunk immutable,界面参考简书
react-motion-menu - 基于React Motion的一个运动菜单组件
react-native-fileupload 重要提示:由booxood创建的iOS版本(react-native-file-upload)。 该存储库是的延续。 支持一次上传多个文件支持文件和字段入门npm install react-native-fileupload --save 的iOS 在XCode...
在Windows系统上调试与发布react-native 开发的IOS系统的全过程
react-native-amap3d react-native高德地图组件,使用最新的3D SDK,支持Android + iOS,受启发,提供功能丰富且易用的接口。 相关项目推荐: 关联文档: : 功能 地图模式切换(常规,卫星,导航,夜间) 3D建筑...
react-typewriter-hook: 用react hooks来实现打字机的效果
react-qmap:一个对腾讯web地图简单封装的React组件
React本机 react-native-uuid是标准A通用唯一标识符(UUID)URN命名空间的零依赖TypeScript实现。 请注意,该库使用基于Math.random伪随机生成器。 具有硬件支持的新版本是WIP。 受以下方面的启发:纳米非常感谢...
React-Grid-Layout:网格布局(grid layout)系统,但专为 React 服务