一、前言

手頭有mac、有開發者證書，不想浪費資源，之前做過iOS開發，還會對移動開發表示關注，現在移動開發目前用Rect Native也是一個熱潮，加上之前有web開發經驗，然後就有了學習的衝動。Keep learning, make me happy!

二、環境配置

1. 需要mac裝置
2. 需要Xcode6.3版本以上
3. 建議安裝watchman,終端命令:brew install watchman
4. 安裝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

真機執行效果：