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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
详解JS函数防抖
Jun 05 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
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自动加载机制的深入分析
2013/06/08 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
使用javascript插入样式
2016/03/14 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
理解python中生成器用法
2017/12/20 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python读取stdin方法实例
2019/05/24 Python
详解Python的三种拷贝方式
2020/02/11 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
.net面试题
2015/12/22 面试题
留学自荐信的技巧
2013/10/17 职场文书
初三班主任寄语大全
2014/04/04 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
听课评语大全
2014/04/30 职场文书
网络技术专业求职信
2014/05/02 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书