前言
这篇文章的目的, 是让没有接触过 RN 的同学能够用最少的时间, 踩最少的坑, 一睹 RN 芳容. 如果网速不慢的话, 一个小时左右, 你就可以运行官方示例项目, 查看项目代码, 对 RN 有一个初步的认识
RN 这门语言不难, 如果有一定的前端基础, 学起来更是如鱼得水.
虽然 RN 目前还不能取代原生, 她的地位是作为前端一统天下的一环. 但是作为一个 coder, 面对相关新技术, 且不论是敌军还是友军, 有适当的了解, 总是好的.
开发环境
开放目录的读写权限
sudo chown -R `whoami` /usr/local
安装 Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装 Node, Watchman
brew install node
brew install watchman
设置 npm 镜像, npm 是一个重要的包管理器, 类似 cocoapods
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安装 react-native-cli, 这是 facebook 推出的命令行工具, 用来创建一个 RN 项目
npm install -g yarn react-native-cli
最后你需要一个 Xcode🙄, 特别注意在 Xcode | Preferences | Locations 菜单中检查一下是否关联 Command Line Tools
First Blood
在网速好的情况下, 搭建开发环境应该是很快的, 现在就可以使用 react-native init 命令创建 RN 项目了
cd Desktop
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
如果能跑起来, 恭喜, 如果遇到什么问题, 请看文章末尾的 错误处理
开发工具选择
过个眼瘾显然不够, 我们还要敲一敲, RN 在开发工具上的选择上非常多, 但是作为一个前端新手, 我墙裂推荐 Visual Studio Code. 这是去年前端领域热度最高的编辑器, 于2016年由微软发布, 提供官方 react-native-tool 插件, 上手简单颜值高.
你需要做的是:
下载安装VSCode -> 安装 react-native-tool 插件 -> 重启VSCode
安装插件看下图
上面都搞定后, 把 AwesomeProject 文件夹拖到 VSCode 就可以编辑了, 试着改改 index.ios.js, 然后模拟器 cmd + r 刷新界面
体验官方示例项目
到了这里, 我们终于一睹了 react-native 的...
额头
什么鬼, 我们只看到了几行代码和一个简单的页面, 不行, 我们要看正脸!
官方示例项目 UIExplorer, 听名字就知道这就是我们要的东西.
cd Desktop
git clone https://github.com/facebook/react-native.git
cd react-native
npm install
用 Xcode 打开 Examples/UIExplorer/UIExplorer.xcodeproj, run起来就 OK 了. 出错请看文章末尾的 错误处理
可以看到, 这个示例项目是一个列表, 列表项几乎包含了所有的控件和api, 点击列表项会 push 到展示控件使用的界面
在 VScode 中查看对应代码, 可以把 UIExplorer 文件夹拖到 VScode, 然后使用 cmd + p 查找文件, 文件名和列表项的 title 是对应的
如果在代码里看到很多报红, 不要紧张, 因为这份示例代码使用的不是最新语法.
任务完成
终于, 我们一睹了 RN 芳容, 然而她穿着旧衣服...
但至少我们见到了不是, 而不再是 听说过 了
下面这张图是我学习 RN 的过程中的一个小小的总结, 不满足于一瞥, 想要更深入的学习的同学可以参考
错误处理
结束掉终端进程, 退出相关程序, 进入项目文件夹, 执行命令
react-native start
如果一切顺利, 使用命令 react-native run-ios 或者直接用 Xcode 跑
如果提示 8081 端口被占用, 这个时候终端会提示你怎么操作, 步骤如下
1.查看占用端口的进程ID
sudo lsof -i:8081
2.杀掉进程
sudo kill 1332(这里写进程ID)
