React-Native 之 环境配置和简单使用
前言
学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢
文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢
更新公告:
更新内容:
- 新增 github 下载的项目运行不了 这小节(之前忘记写了,抱歉)
了解 React Native
大家都知道,开发原生 App 的成本很高,但是目前基于原生开发仍然是必需的,随着 HTML5 的出现,我们可以使用 Web 开发,虽然能够实现在所有有浏览器的平台上使用并且支持试试热部署,但是在体验方面仍无法超越原生 App ,那么有没有成本较低,又比较好的解决方案呢?答案就是 Native 相对于 Web,Native 有下面几点优点
- Native 的原生控件有更好的体验(目前认为最大的优势)
- Native 有更好的手势识别
- Native 有更合适的线程模型(Web Worker 也可以解决这部分问题,但是在图形解码、文本渲染上仍然没办法多线程渲染,这样就会影响 Web 展示的流畅性)
- Native 的流畅度目前和原生的保持在同一层次(在优化好的前提下)
React Native 是 Facebook 在 F8 大会开源的,在不到一年的时间内成为手机端必不可少的开发模式,像国内Pad版的QQ空间、淘宝等都是使用 React Native 开发的,其中做得比较好的当属淘宝
React Native 设计理念就是即拥有 Native 的用户体验,又保留 React 的开发效率
开发者可以灵活使用 HTML 和 CSS布局,使用 React 语法构建组件,实现 H5, iOS, Android 多端的代码复用,大概结构如下图
React Native 开发注意事项
- 目前React Native 在 iOS 上仅仅支持 iOS7 及以上操作系统,Android 仅支持 Android4.1 及以上操作系统,github下载地址 官方文档
- React Native 的版本更新速度特别快,如果没有比较好的 JavaScript 基础,下列的建议还是必要参考的
- 对于部分复杂的应用,考虑原生 + React Native 混合开发方式
React Native 开发环境配置
在安装 React Native 之前我们需要先配置一下所需的开发环境,具体详细见下面
环境要求
- 安装 Homebrew( Homebrew 是 OSX 的套件管理器,我们可以通过它获取并安装很多需要的组件
- 安装方式:打开 Mac 的
终端
→ 粘贴命令ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 验证是否安装成功:打开 Mac
终端
→ 粘贴命令brew -v
,出现类似下列提示表示安装成功
- 安装方式:打开 Mac 的
- 安装 Homebrew( Homebrew 是 OSX 的套件管理器,我们可以通过它获取并安装很多需要的组件
安装 WatchMan(该插件用于监控bug文件和文件变化,并且可以出发指定的操作)
- 安装方式:打开Mac的
终端
→ 粘贴命令brew install watchman
- 验证是否安装成功:待看到类似以下的提示表示安装成功
- 安装方式:打开Mac的
安装 Flow(flow 是一个 JavaScript 的静态类型检查器,方便找出代码中可能存在的类型错误)
安不安装看个人,推荐安装
- 安装方式:打开Mac的
终端
→ 粘贴命令brew install flow
- 注意事项:(如果提示 command not found,需要在命令前加上sudo获得最高权限) - 验证是否安装成功:待看到类似以下的提示表示安装成功
- 安装方式:打开Mac的
安装 npm 和 Node.js
- Node.js 最好安装4.0及更高版本,Node 内包含了 npm,所以直接下载Node.js安装
- 下载方式:选择各自系统版本下载
正式安装 React Native
安装 React Native
- 安装方式:打开Mac的
终端
→ 粘贴命令npm install -g react-native-cli
- 注意事项:(如果提示command not found或者出现一大堆error提示的,在确保已经安装npm的情况下需要在命令前加上
sudo
获得最高权限)
- 安装方式:打开Mac的
验证是否安装成功:
安装 iOS 和 Android 开发环境
iOS需求:Xcode7及以上更高版本
Android 需求
- 下载安装最新版Android studio
- 方式一:可以安装 Android studio 省略下面的步骤(推荐)
- 建议提前修改下 hosts,要不稍后下载sdk特别慢
- 命令行:sudo sudo vi /etc/hosts/ → 添加203.208.46.146 dl.google.com
45 203.208.46.146 dl-ssl.google.com →:wq
保存退出
- 命令行:sudo sudo vi /etc/hosts/ → 添加203.208.46.146 dl.google.com
- 方式二:(比较麻烦,需要配置)
- 安装 Android SDK
- 安装方式:brew install android-sdk
- 验证是否安装成功:
- 安装 Android SDK
- 下载安装最新版Android studio
定义 Android_HOME 环境变量
- 确保 Android_HOME 环境变量指向已经安装的 Android SDK 目录(路径/.bashrc,/.bash_profile或者终端所用的其它配置文件中增加下面的内容)
# 如果你是通过Homebrew安装SDK的,则加入下列路径
export ANDROID_HOME=/usr/local/opt/android-sdk
# 否则加入下列路径
export ANDROID_HOME=~/Library/Android/sdk设置SDK
- 打开Android SDK Manager(Mac用户在终端下输入 android)→ 选中以下项目
Android SDK Build-tools version 23.0.1(这个必须版本严格匹配23.0.1)
Android 6.0 (API 23)
Local Maven repository for Support Libraries(之前叫做Android Support Repository)具体设置看下面的动态图(这边我就只安装常用的)
安装 Genymotion(Genymotion 是第三方模拟器,比起Google官方的模拟器更易设置且性能更好。但是,它只针对个人用户免费)
- Genymotion下载安装
- 打开Genymotion,如果没有安装VirtuaIBox,会提示安装
- 创建一个模拟器并启动
- 按下Mac快捷键 cmd + M 可以打开开发者菜单(
在安装并启动了React Native应用后可用
)
测试 React Native 等各项功能是否正常
- 生成新工程
打开 Mac 的
终端
→ 粘贴命令react-native init 项目名称
(这边我们就用react-native init TestRN),成功后会出现以下提示
注意事项:这边需要注意的是,速度快慢和网络情况有关(React-Native命令行需要从npm官方源下载代码会遇上麻烦,可以将npm仓库源替换成国内镜像)
- 方式:打开 Mac 的
终端
→ 粘贴下面命令npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
- 方式:打开 Mac 的
工程目录结构分析
现在我们的新工程(TestRN)已经配置好了,那么生成的文件都在哪里呢?不知道上面的图中有没有发现,其实已经提示我们路径就是如下图标记出来的位置
打开我们的TestRN,我们可以看到默认生成了 iOS 和 Android 两个平台的原生项目
除了这些之外,还有 index.ios.js 和 index.android.js (这就是入口),node_modules文件夹是为Node.js存放和管理npm包资源,也包含React Native框架文件
在 iOS 上运行第一个 React Native 应用
使用 Xcode 打开我们 iOS 文件夹中的工程
运行工程文件(不管 iOS 还是 Android,在开发阶段都需要在系统上启动一个HTTP服务 ——
Debug Server
,默认运行在8081端口,APP通过它加载js)注意事项:这个窗口不要关闭
运行效果
在 Android 上运行第一个 React Native 应用
方式一:如果是安装了 Android studio 的朋友可以直接使用它运行
方式二:命令行打开项目主目录(我这边路径为/Users/yeshaojian/TestRN):
cd /Users/yeshaojian/TestRN
→ 命令行:react-native run-android
→第一次运行的话会下载一些必要的 SDK,时间比较久,所以只能耐心等待
注意事项:这个窗口不要关闭
运行效果
如何查看和修改代码
我习惯使用 WebStrom 这个 HTML 开发神器,这边就以这款神器为例
目录结构
这边就以 iOS 为例,我们点击index.ios.js就可以查看代码了,接下来看看大概部分
修改代码(我们将 Welcome to React Native! 修改成 hello Word!)
export default class TestRN extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
hello Word!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
在模拟器上使用 cmd + R 就可以刷新了
管理 React Native 版本
因为 React Native 经常更新,我们开发中也经常需要控制它的版本库,来做到适配各种条件下的开发,那么如何查看和控制版本,在网上搜了一些资料整理后感觉下面的方式还是比较方便的分享给大家
查看本地的 React Native 版本
- 命令行:
react-native --version
- 命令行:
更新本地的 React Native 的版本
- 命令行:
npm update -g react-native-cli
- 命令行:
查询 react-native 的 npm 包最新版本
- 方式一:npm包地址
- 方式二:
npm info react-native
- 方式三:项目中查看当前 npm 包版本
升级或降级 npm 包的版本
- 命令行:
npm install --save react-native@0.18
- 命令行:
更新项目 templates 文件(新的npm包会包含更新运行在 react-native init 命令生成的一些动态文件,比如 init 创建项目的时候会生成 iOS 和 Android 的子项目,我们可以通过下面的命令获取最新代码)
- 命令行:react-native upgrade
github 下载的项目运行不了
其实这是因为下载的项目自动忽略了node文件夹内所有的内容,因为如果电脑内装的版本和作者使用的版本不同,那么也会运行不了,既然这样干脆就不托管,由下载项目的用户自己进行配置,那怎么配置呢?这边我们来讲下:
打开终端,进入我们下载的项目根目录下:
cd 下载的项目根目录路径
接着,安装npm包就可以了:
npm install
- 等到安装完毕后,我们就可以运行项目了。
WebStom设置React Native代码提示
从 gitHub 上下载xml插件:https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
- 安装
- 将ReactNative.xml复制到
~/Library/Preferences/WebStorm10/templates
(就是webStorm的安装的目录) → 如果没有templates
文件夹,我们可以自己新建一个,然后重启 WebStrom
- 将ReactNative.xml复制到
React-Native 之 环境配置和简单使用的更多相关文章
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- Mac电脑配置IOS React Native开发环境配置笔记
React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...
- 深入浅出React Native 1: 环境配置
该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不 ...
- React Native ——入门环境搭配以及简单实例
一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent. ...
- React Native环境配置和简单使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- React Native iOS环境搭建
前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
- React Native 开发环境安装和配置使用报错: -bash: react-native: command not found
[React Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...
- Mac配置React Native开发环境
一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提 ...
- React Native开发 - 搭建React Native开发环境
移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...
随机推荐
- MT【116】三个点动起来
评:当若干个变量时抓住主变量,立体几何问题平面化.
- 【agc006f】Blackout(神仙题)
[agc006f]Blackout(神仙题) 翻译 给定一个\(n*n\)的网格图,有些格子是黑色的.如果\((x,y),(y,z)\)都是黑色的,那么\((y,x)\)也会被染黑,求最终黑格子数量. ...
- 【hdu4010】 Query on The Trees
http://acm.hdu.edu.cn/showproblem.php?pid=4010 (题目链接) 题意 link cut tree板子 Solution link cut tree 细节 注 ...
- 解题:SCOI 2010 序列操作
题面 线段树......模板题(雾? 然而两种标记会互相影响,必须保证每次只放一个(不然就不知道怎么放了),具体的影响就是: 翻转标记会使得覆盖标记一起翻转,下放的时候就是各种swap 覆盖标记会抹掉 ...
- PostgreSQL 修改字段类型从int到bigint
由于现在pg的版本,修改int到bigint仍然需要rewrite表,会导致表阻塞,无法使用.但可以考虑其他方式来做.此问题是排查现网pg使用序列的情况时遇到的. 由于int的最大值只有21亿左右,而 ...
- 线程属性API
数据类型:pthread_attr_t 操作API: // 初始化线程属性 int pthread_attr_init(pthread_attr_t *attr);// 初始化为系统支持的所有属性的默 ...
- App统计指标定义
度量(指标) 定义 活跃用户 指启动应用的用户(去重,即1台设备打开多次会被计为1个活跃用户). 是衡量一个应用运营情况最基础的一个指标,用以表示用户规模.通常根据不同的时间限定,有日活跃用户.周活跃 ...
- css--display属性中inline-block与inline的区别
inline-block 与 inline 的区别: inline-block 与inline 效果类似,但是inline-block是可以设定宽度和高度的!!而行内元素(也就是inline)是无法设 ...
- ElasticStack系列之七 & IK自动热更新原理与实现
一.热更新原理 elasticsearch开启加载外部词典功功能后,会每60s间隔进行刷新字典.具体原理代码如下所示: public void loadDic(HttpServletRequest r ...
- Showbo.js弹窗实现(jquery)
一.搭建环境 下载showBo.js和showBo.css 下载链接:https://pan.baidu.com/s/1iUUlKXFNXCBEvBnds4ECIA 密码:its4 显示效果图: 二 ...