ReactNative 入门
1.环境搭建(Mac)
- Homebrew
Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：
sudo chown -R `whoami` /usr/local
- Node
brew install node
- React Native的命令行工具（react-native-cli）
npm install -g react-native-cli
- Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。
brew install watchman
- Flow
Flow是一个静态的JS类型检查工具。
brew install flow
2.开发工具
可以用来开发reactnative的工具非常的多,常用的如下:
-
Atom + Nuclide
Nuclide是Fackbook专门为React开发IDE
Atom是一个开源版本的编辑器，非常强大以及完美的体验 - 前端开发神器：
WebStorm
WebStorm破解版
3.deco
react-native中的Xcode 值得期待一下
4.VSCode (本人目前在用，强烈推荐)
React Native Tools
3.React Native第一个应用(AwesomeProject)
- 首先执行如下命令,生成一个工程
react-native init AwesomeProject
目录结构如下:
目录结构
可以看到,同时包含android和ios两个平台的原生项目,分别为Android Studio和Xcode创建的项目
index.android.js和index.ios.js文件为Android和IOS的启动文件
node_modules文件夹是用来Node.js存放和管理npm包
package.json文件是npm包的配置文件,管理模块的依赖关系
- 运行程序
命令行执行cd AwesomeProject,路径切换到项目主目录
- 运行iOS
用Xcode打开运行或者执行
- 运行android
用Android studio打开运行或者执行
效果如下:
运行效果
至此,第一个react-native应用程序就跑起来了,后面将长期持续的进行react-navie的学习
