【Facebook的UI开发框架React入门之三】第一个项目(iOS平台）-goodmao

参考：
https://facebook.github.io/react-native/docs/getting-started.html

https://facebook.github.io/react-native/docs/tutorial.html#content

最新版本的React库源码：react-native v0.5

https://github.com/facebook/react-native/releases/tag/v0.5.0-rc

---------------------------------------------------------------------------------------------------

| goodmao
---------------------------------------------------------------------------------------------------

上一节内容，我们已经安装好了React.Native的开发和运行环境，
并创建了一个基于React.native的iOS项目。
大家可以参考第一步，回顾一下，然后看项目编译运行的简单分析。

一、创建基于React.native的iOS项目
1.创建基于React的iOS项目
项目名称：AwesomeProject
终端命令：react-native init AwesomeProject
2.Xcode编译运行项目
用Xcode打开项目：AwesomeProject
效果：在模拟器或iOS设备，可以见到提示字符串内容。



二、项目文件
1.项目HelloReact：
即：上面新建好的React项目文件夹：



2.Js文件
文件名：index.ios.js
位置：在项目文件夹中（/Users/goodmao/HelloReact/index.ios.js），已经存在了。
作用：它是JavaScript的源码，其中定义了UI控件与用户交互的处理。
编译完成后的app，能从服务器获取该文件的内容，并在模拟器或iOS设备上运行，
效果与原生语言Objective-C或Swift编写的界面风格完全一致。

三、注意
1.服务器的问题
因为UI部分放在服务器上，有利于修改和更新发布；
但必须保证服务器上对应的服务开启了，否则手机端无法获取该文件资源，而无法加载界面数据。
2.启动方法
2.1.切换目录
终端命令：cd /Users/goodmao/Documents/HelloReact
2.2.启动服务
终端命令：npm start
若启动成功，则如下图：



3.获取Mac的OS X当前IP地址，两种方法：
3.1.终端命令
ifconfig | grep "inet " | grep -v 127.0.0.1



3.2.从系统偏好设置获得
系统偏好设置->网络->以太网（或wifi）->IP地址



4.在iOS设备真机运行
需要修改项目代码中的服务器地址。
文件：AppDelegate.m
方法：- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
代码：jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
改为：jsCodeLocation = [NSURL URLWithString:@"http://172.16.105.149:8081/index.ios.bundle"];