参考React Native 中文网的文档来进行操作
http://reactnative.cn/
首先我们不管我们会不会前端知识，我们需要看到一个可以跑起来的程序，让我们在理解它之前先见到它！那么我们开始按照文档来搭建RN的环境。
一.环境需求
1.OS X - 本向导假设您的操作系统是OS X，因为这是开发iOS应用所必须的。
2.推荐使用Homebrew来安装Watchman和Flow
3.安装Node.js4.0或更高版本(译注：如果你并不使用Node.js开发网站，只是用于React Native的开发，那么请先安装homebrew，然后直接使用brew install node安装即可，不必按照下面的nvm的安装步骤)
//如果只是想要ReactNative 不需要做(1)(2);
（1）安装nvm（安装向导在这里）。然后运行nvm install node && nvm alias default node，这将会默认安装最新版本的Node.js并且设置好命令行的环境变量，这样你可以输入node命令来启动Node.js环境。nvm使你可以可以同时安装多个版本的Node.js，并且在这些版本之间轻松切换。
（2） 如果你从未接触过npm，推荐阅读npm的文档
4.在命令行中输入brew install watchman，我们推荐安装watchman，否则你可能会遇到一个Node.js监视文件系统的BUG。
5.如果你希望使用flow来为js代码加上类型检查，那么在命令行中输入brew install flow来安装flow。（译注：新手可以跳过这一步）
我们推荐您定期运行brew update && brew upgrade来保持上述几个程序为最新版本。
2.快速开始
//执行时候记得去掉$
$ npm install -g react-native-cli
$ react-native init AwesomeProject
译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：
npm configsetregistry https://registry.npm.taobao.org
npm configsetdisturl https://npm.taobao.org/dist
另，执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，请使用chown修复）。
这个init真的要等很久，我换了姿势也没变快所以大家多等等吧。
init后面就是初始化的文件夹名称 至于这个Awesome是有什么意义并没明白,希望有人能指出.
然后你再你的目录下就可以看到这个叫做AwesomeProject的文件夹了
生成了你的第一个项目文件夹
我们打开这个文件夹可以看到
工程的结构长成这个样子，这是啥子？我们先不去考虑,看能不能跑起来。
RN文件目录
我们进入ios文件夹中（喂iOS可好？）
依然是熟悉的它们
依然是熟悉的它们，习惯性地点开。
大概看一眼目录结构
我们进入AppDelegate.m去看NR做了什么?
我们看到在完成加载的方法中RN这样达到了显示的效果。
NSURL*jsCodeLocation;
/**
* Loading JavaScript code - uncomment the one you want.
*
* OPTION 1
* Load from development server. Start the server from the repository root:
*
* $ npm start
*
* To run on device, change `localhost` to the IP address of your computer
* (you can get this by typing `ifconfig` into the terminal and selecting the
* `inet` value under `en0:`) and make sure your computer and iOS device are
* on the same Wi-Fi network.
*/
jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
/**
* OPTION 2
* Load from pre-bundled file on disk. The static bundle is automatically
* generated by "Bundle React Native code and images" build step.
*/
//jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"AwesomeProject"
initialProperties:nil
launchOptions:launchOptions];
self.window= [[UIWindowalloc]initWithFrame:[UIScreenmainScreen].bounds];
UIViewController*rootViewController = [UIViewControllernew];
rootViewController.view= rootView;
self.window.rootViewController= rootViewController;
[self.windowmakeKeyAndVisible];
好我们Run一下程序。（我第一次运行的时候出现提示watchman的error，随手重新运行了一下就好了没记录到错误原因）
我们看到终端为我们打开了一个ReactPackager
这个操作会同时打开一个用于实现动态代码加载的Node服务（React Packager）。所以每当你修改代码，你只需要在模拟器中按下⌘+R，而无需重新在XCode中编译。
模拟器中出现WelcomeToReactNative字样
完成“Hello World”的程序运行，见到RN世界的world，让我们尝试更改内容，再次跑一下。
打开index.ios.js文件进行JS代码的编辑
（这里有朋友推荐IDE使用Sublime来编辑代码，需要的朋友可以去下载下free）
我们看到React.js的代码
更改其中的文本内容为“从零开始学习ReactNative！”
在模拟器界面直接Command + R
完成更改
按下Cmd+D后出现调试菜单，我们在以后会进行了解。
按下Cmd+D后出现调试菜单
完成Hello World 任务。我们开始进入下一阶段的探索。
网友评论