前记
为啥要学习react-native,其实也算要去赶赶潮流吧,毕竟技术也新,还是FB的开源项目,在github也很受欢迎,作为一个前端开发者,是要了解了解的。
在此记下自己的学习历程,也算是给自己日后复习用吧,大部分知识是能在网上找到的,在学习中总结下,毕竟对js理解不够深,如有错误待以后再更正。
一.安装配置
第一步当然是安装配置开发环境,在mac上安装。window暂时不考虑,也不考虑制作安卓版的app,只运行在ios进行调试。
1.安装node和homebrew
nodejs可以直接去官网下载最新版,版本号大于4.0,如果以前已经下载了,版本不是最新的,可以更新到最新版本(也可以用nvm管理node的版本)。
首先安装n模块:
npm install -g n
升级node.js到最新稳定版:
n stable
安装homebrew,homebrew简称brew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件,在官网复制如下代码运行。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在命令行中输入 brew install watchman,推荐安装 watchman,否则可能会遇到一个Node.js监视文件系统的bug。
如果你希望使用flow来为js代码加上类型检查,那么在命令行中输入brew install flow来安装flow。
建议定期运行 brew update && brew upgrade 来使您的应用程序保持最新状态。
2.安装xcode
这个太简单了,直接去appstore里面搜索安装即可。
3.初始化一个项目
环境抖配置好了,就可以开始了,首先我们需要初始化一个react-native项目:
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/
用终端进入你想要建立项目的目录中,执行代码,即可得到一个最初始的项目架构了。当然因为npm被墙的原因,所以我们需要用国内的镜像,否则在执行$ react-native init AwesomeProject的时候就傻眼了,一直停在安装的页面~让人蛋疼!我们需要:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
react-native init AwesomeProject的时候不要在前面加管理员权限,否则会导致一系列权限问题。假如这样执行之后在初始化的时候依然很慢,那就再来几遍吧,因为我就是这样的,不过我还试了其他方法,方法的原理都是一样的,使用淘宝的镜像。如下:
使用config命令:
npm config set registry https://registry.npm.taobao.org
npm info underscore (如果上面配置正确这个命令会有字符串response)
编辑 ~/.npmrc 加入下面内容:
registry = https://registry.npm.taobao.org
现在初始化项目的时候就快多了吧!ps:init后面的是项目名称,可自行修改~
二. 项目文件目录介绍
1. 文件目录结构
android
...
index.android.js
index.ios.js
ios
...
node_modules
...
package.json
2. 目录介绍
android是安卓工程,ios是苹果的工程,这两个文件夹不需要改。
package.json是一些项目信息。
node_modules是node的模块,是两个工程的依赖,不需要修改。
对于我们来说在*.js里面写代码即可。不做安卓,只需要在index.ios.js里面修改。当前只有一个页面,对应这一个文件,项目大的话需要自己继续建立其他文件。一般以.ios.js结尾
3. 打开我们的项目
进入项目目录,找到 ios 这个文件夹,打开 AwesomeProject.xcodeproj 这个文件,默认打开工具是xcode,在xcode中点击运行即可看到运行的页面。修改代码后⌘-R刷新代码,可以在页面中看到修改后的效果。
写在最后
边学习边记录,也方便以后查看,希望能温故知新。
接来下会看看极客学院的视频,已经看到一个做小页面的,很简单,下一篇写一下怎么做。