ReactNative入门

ReactNative 入门

1.环境搭建(Mac)

1. 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

2. Node

brew install node

3. React Native的命令行工具（react-native-cli）

npm install -g react-native-cli

4. Watchman
   Watchman是由Facebook提供的监视文件系统变更的工具。

 brew install watchman

5. Flow
   Flow是一个静态的JS类型检查工具。

brew install flow

2.开发工具

可以用来开发reactnative的工具非常的多,常用的如下:

1. Atom + Nuclide
   Nuclide是Fackbook专门为React开发IDE
   Atom是一个开源版本的编辑器，非常强大以及完美的体验
2. 前端开发神器：
   WebStorm
   WebStorm破解版
   3.deco
   react-native中的Xcode 值得期待一下
   4.VSCode (本人目前在用，强烈推荐)
   React Native Tools

3.React Native第一个应用(AwesomeProject)

1. 首先执行如下命令,生成一个工程

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包的配置文件,管理模块的依赖关系

2. 运行程序
   命令行执行cd AwesomeProject,路径切换到项目主目录

• 运行iOS
  用Xcode打开运行或者执行

• 运行android
  用Android studio打开运行或者执行

效果如下:

运行效果

至此,第一个react-native应用程序就跑起来了,后面将长期持续的进行react-navie的学习