React Native 是 FaceBook 开源的一个我的项目,FaceBook 心愿能够用写 Web App 的形式去写 Native App。它能够让咱们用 JS 和 React 来开发利用,应用 React Native 能够通吃 Android 和 IOS , 以及 Web, 仅仅须要一份业务逻辑代码就能够来创立咱们的利用。
起源
React Native 是由 React 衍生进去的,而 React 起源于 Facebook 的外部我的项目,因为 FaceBook 对市场上所有 JavaScript MVC 框架,都不太称心,就决定本人写一套,用来架设本人的的网站。等做进去当前,发现这套货色很不错,而且好用,就在 2013 年 5 月开源了。
而衍生的 React Native 我的项目,心愿用写 Web App 的形式去写 Native App。这样同一组人只须要写一次 UI,就能同时运行在服务器、浏览器和手机上。FaceBook 最早公布的对于 React Native 是针对 IOS 的,而 React Native for Android 是在去年也就是 2015 年 9 月 15 日开源公布的。现阶段 React Native 的体验尽管曾经很不错了,只能说很靠近原生利用,然而还是不能达到 Native App 的体验。所以它很火,未来的事,咱们将来说,然而目前曾经十分火了,多门技术,多条路。咱们也应该学学了。
环境搭建
因为我用的是 macbook,所以这次环境搭建是依据 mac 电脑来说的,不过大家释怀,针对 windows 电脑的环境搭建,我会分享给大家一篇文章或者视频的,不会忘了你们的。
Homebrew 装置
Homebrew 是一款自在及凋谢源代码的软件包管理系统,用以简化 Mac OS X 零碎上的软件装置过程,Homebrew 以 Ruby 语言写成,针对于 Mac OS X 操作系统自带 Ruby 的版本。默认装置在 /usr/local,由一个外围 git 版本库形成,以使用户能更新 Homebrew。是 OS X 不可或缺的套件管理器。
装置之前,你能够先检查一下电脑上是否曾经装置了 Homebrew,查看形式如下:
在终端执行下列命令:
brew -v
如果曾经装置了,就像下图一样,显示版本号。
图片
如果没有装置,那就能够用上面这种形式,进行装置,在终端上间接输出上面的命令即可:
ruby -e “$(curl -fsSL https://raw.githubusercontent…
Node.js 的装置
Node.js®是一个基于 Chrome V8 引擎的 JavaScript 运行时。Node.js 应用高效、轻量级的事件驱动、非阻塞 I/O 模型。Node.js 之生态系统是目前最大的开源包管理系统。咱们都晓得 React Native 是须要应用 js 开发的,所以 Node.js 是必不可少的装置。
装置 Node.js 也很简略,如下:
nvm install node && nvm alias default node
可能你发现了,在 Terminal 终端上应用的命令是 nvm,如果你没有装置 nvm 是会提醒 command not found 的,所以咱们还得先装置 nvm。
nvm 是 Node.js 的版本管理器,能够轻松装置各个版本的 Node.js 版本。装置形式如下:
咱们能够通过 Homebrew 装置:
brew install nvm
或者通过这里的形式装置,地址:https://wwwsangpi.com
装置完了 nvm,咱们这里最好配置一下环境变量到.bash_profile 文件,因为如果不配置的话,容易呈现这个谬误 nvm command not found。
配置形式如下:
export NVM_DIR=”/Users/loonggg/.nvm”
[-s “$NVM_DIR/nvm.sh”] && . “$NVM_DIR/nvm.sh” # This loads nvm
查看是否装置好了 node 和 nvm 咱们能够通过如下形式:
bogon:~ loonggg$ node -v
v5.10.1
bogon:~ loonggg$ npm -v
3.8.3
装置 watchman 和 flow
Watchman 是 facebook 的一个开源我的项目,它开源用来监督文件并且记录文件的改变状况,当文件变更它能够触发一些操作, 例如执行一些命令等等。
flow 是一个 Javascript 动态类型查看器。Flow 为 Javascript 增加了动态类型查看,以进步开发效率和代码品质。
装置形式如下:
brew install watchman
brew install flow
装置 React Native
咱们应用 npm 进行装置,如下:
npm install -g react-native-cli
装置完 React Native 之后,要想运行或者初始化一个我的项目,而后运行到模拟器或者真机,咱们须要搭建一个 Android 或者 ios 开发环境,我这里只介绍 android,置信想学习 React Native 的同学,电脑上都基本上有了 Android 的游戏开发环境。然而可能会有坑,www.sangpi.com 有一个大坑就是得配置 SDK 的环境变量:ANDROID_HOME。
SDK 环境变量的配置
启动 Terminal 终端工具
输出 cd ~/ 进入以后用户的 home 目录
创立:
touch .bash_profile
关上并编辑:
open .bash_profile
在文件中写入以下内容:export PATH=${PATH}:/Users/loonggg/Application/android-sdk-mac_x86/tools:/Users/loonggg/Application/android-sdk-mac_x86/platform-tools
情谊提醒:上述门路,请换成本人电脑上的 SDK 所在门路
执行如下命令:
source .bash_profile
验证:输出 adb 回车。如果未显示 command not found,阐明此命令无效,环境便亮设置实现。
创立咱们的第一个 React Native 利用
初始化我的项目
react-native init AwesomeProject
下面的 AwesomeProject 这个我的项目名字,你能够本人随便定义,本人命名,没有限度。
运行我的项目
切换到 AwesomeProject 的主目录
运行我的项目命令
react-native run-android
咱们应用编辑器关上和批改 index.android.js 文件,调出模拟器菜单键,抉择从新载入 js 即可看到变动。
启动后,模拟器效果图:
图片
到这里咱们就把环境配置讲完了,对于 windows 上的装置,我会给大家发篇材料或者视频的,在公众号对话框里回复关键字:“RN 环境配置”获取 windows 版的环境配置。