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 相关文章推荐
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP中用hash实现的数组
2011/07/17 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
中间件分为哪几类
2012/03/14 面试题
银行竞聘上岗演讲稿
2014/09/12 职场文书
外出听课学习心得体会
2016/01/15 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
Mysql中常用的join连接方式
2022/05/11 MySQL