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里的each使用方法详解
Dec 22 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
原生js实现购物车功能
Sep 23 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
php的常量和变量实例详解
2017/06/27 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
js获取系统的根路径实现介绍
2013/09/08 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
如何使用python代码操作git代码
2020/02/29 Python
Keras设置以及获取权重的实现
2020/06/19 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
数学国培研修感言
2014/02/13 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
乐山大佛导游词
2015/02/02 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python