一、前言
手头有mac、有开发者证书，不想浪费资源，之前做过iOS开发，还会对移动开发表示关注，现在移动开发目前用Rect Native也是一个热潮，加上之前有web开发经验，然后就有了学习的冲动。Keep learning, make me happy!
二、环境配置
- 需要mac设备
- 需要Xcode6.3版本以上
- 安装Node.js:https://nodejs.org/download/
- 建议安装watchman,终端命令:brew install watchman
- 安装flow:brew install flow
三、Hello,React-Native
现在我们需要创建一个React-Native的项目，因此可以按照下面的步骤：
打开终端，开始React-Native开发的旅程吧。
1. 安装命令行:sudo npm install -g react-native-cli
2. 创建HelloWorld项目:react-native init HelloWorld
3. 找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
4. 在xcode中，使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉，比如模拟器的选择等。
5. 启动完成你应该会看到运行效果
![这里写图片描述]()
四、初识HelloWorld工程
Xcode里面的代码目录结构暂时不用管了，打开HelloWorld项目文件夹，找到index.ios.js文件。
index.ios.js文件就是React-Native JS 开发之旅的入口文件了。 先来个感性的认识，修改一
些文本，下一篇会解读里面的代码。用文本编辑器打开index.ios.js文件。
（1）找到代码部分：
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
修改成
<Text style={styles.welcome}>
React-Native入门学习
</Text>
（2）修改welcome标签的样式
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
修改成：
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'red',
},
（3）如果有前端开发经验这些应该很容易理解，然后重新运行看效果
![这里写图片描述]()
五、理解怎么运行到js脚本里面的
恭喜你
![这里写图片描述]()
如果不搞懂上面这一个原理，参考学习官网的话你会发现第一个例子你就跑不起来，然后就会郁闷了。
六、运行官网的一个HelloWorld案例
在上面的基础上，我们来学习官网的案例。我们通过命令创建出来的HelloWorld有点复杂，我们可以删除重新写一个简单的HelloWorld开始。
参考官网第一篇教程
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
如果你只是复制到index.ios.js文件中会出现报错，因为程序启动的时候找不到这个文件中的注册的HelloWorldApp类
![这里写图片描述]()
修改：
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
然后cmmand+d重新Reload即可，不需要重启应用，这也意味着React Native开发应用可以热更新
提示：隐藏状态栏
这里我们没有设置文本都位置，默认就是在左上角，会跟状态栏重叠，我们可以隐藏状态栏即可
![这里写图片描述]()
运行效果
![这里写图片描述]()
七、真机调试
网上好多文章讲述如何iOS真机调试，但都有问题，编译会报错，后来发现可能是版本不一致，我用的是目前最新版本0.40,
（1）修改Signing
![这里写图片描述]()
（2）修改IP
![这里写图片描述]()
真机运行效果：
![这里写图片描述]()
