React Native 环境搭建的教程


Posted in Javascript onAugust 19, 2017

一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用。第一步从环境搭建开始。

环境搭建

分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了

$ brew install node

$ brew install watchman

$ brew install yarn

$ npm install -g react-native-cli

$ npm install -g react-devtools   // debug工具,可选

创建应用

只要运行下面的命令就可以创建一个名为 AwesomeProject 的 RN 项目

react-native init AwesomeProject

也可以指定使用 RN 版本号,

react-native init AwesomeProject --version 0.47.0

该命令会创建一个 package.json 的文件,就是 npm 管理依赖的文件。这个文件中需要特别注意,在 dependencies 中申明的 react 和 RN 的版本一定要配对。有一次生成后的项目运行总是报错,百思不得其解,最后才发现是版本不匹配造成的。只能默默修改版本号,然后运行 npm install 才得以解决

{

 "name": "AwesomeProejct",

 "version": "1.0.0"

 "private": true,

 "scripts": {

  "start": "node node_module/react-native/local-cli/cli.js start"

 },

 "dependencies": {

//  "react": "^15.6.1", // was installed by npm but not matched

  "react": "^16.0.0-alpha.12", // correct dependency version for react

  "react-native": "^0.47.0"

 }

}

除了依赖管理文件以外,还有 ios 和 android 两个目录用来存放原生代码,以及一些初始化的 JavaScript 文件模板,以后会用到,就不一一列举了。

初次运行

初次运行是用来检查环境是否正确的简单的反馈,根据平台运行下列命令

$ react-native run-ios
or
$ react-native run-android

Android 需要事先启动模拟器或者连接真机,iOS 会自动启动模拟器。如果看到下面这个界面,恭喜你已经完成了环境的搭建,就可以开始应用层的开发了。

React Native 环境搭建的教程

RN First Launch

启动过程

到此结束也是可以的,但是还有一个问题需要解释一下,以便之后能够快速进入 RN 应用开发。如上节提到的启动命令,可以分解成两步。

步骤1. 启动服务器

一个步骤是启动开发服务器,它是用来提供运行所需的 JavaScript 文件的,当然也可以用下面的命令单独启动

npm start

服务会占用本地的8081端口,如果该端口被占用,需要依次运行下面两个命令来结束占用端口的进程

$ sudo lsof -i :8081
$ kill -9 <PID>

步骤2. 启动移动端

另一个步骤就是编译移动原生代码并安装运行,和平时开发原生移动应用是一样的。也可以到平台各自的目录下,ios或者android,用 IDE 打开并编译运行。

启动完成并看到上面的截图的界面,就不用反复编译和启动移动端程序,每次代码修改只需在模拟器中按提示刷新即可看到修改内容。因为 RN 的主要的逻辑代码在服务器端的 JavaScript 中,就是说每次刷新都会拉取服务器上的最新代码并重新渲染用户界面。

当然,目前提到的整个过程仅指在开发阶段,生产环境中可以更自由, JavaScript 文件的存放可以在服务器和客户端之间进行选择。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习JavaScript的最佳方法分享
Oct 21 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 #Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 #Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 #Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 #Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 #Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 #Javascript
深入理解ES6的迭代器与生成器
Aug 19 #Javascript
You might like
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
Python struct.unpack
2008/09/06 Python
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python实现图像拼接功能
2020/03/23 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
教师的实习自我鉴定
2013/12/17 职场文书
公司开业庆典主持词
2014/03/21 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
法人代表证明书格式
2014/10/01 职场文书
品质保证书格式
2015/02/28 职场文书
2015年采购工作总结
2015/04/10 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang