******************** RN開發環境搭建完成后，總會來一個“HelloWorld”嘚瑟一下。********************
參考資料：http://v.youku.com/v_show/id_XMTQ4OTYyMjg4MA==.html
1.創建HelloWorld （一個很惡心的地方就是：每次都得用終端輸入替換鏡像源的兩個命令，要不然就得悲催的傻等）
2.成功后，會在根目錄生成HelloWorld的工程。
package.json 文件
A.name和version是package.json中最重要的兩個字段，也是發布到NPM平台上的唯一標識，如果沒有正確設置這兩個字段，包就不能發布和被下載。
B. scripts 通過設置這個可以使NPM調用一些命令腳本，封裝一些功能。
C.dependencies 指定依賴的其它包，這些依賴是指包發布后正常執行時所需要的，如果是開發中依賴的包，可以在devDependencies設置。
3.打開IOS工程，並運行。
首先會彈出一個“終端窗口”，叫做React Packager: 做打包的工具，一個微型的HTTP服務器，默認在8081端口運行，把用戶寫的js文件及所有依賴的第三方js文件收集在一起並打包，通過HTTP協議提供給用戶創建的React Navtive應用。
React Native應用分為兩個部分：
A.原生代碼部分
B.JS代碼部分
應用啟動，在開發模式下（Debug），就會尋找 “index.ios” 這個文件（參考AppDelegate.m文件），“index.ios” 就是有Packager提供。Packager收集js文件通過轉碼（EC6 -> EC5）
IOS項目中 Icon Launch等設置沒有改變
4.index.ios.js 文件分析
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
* 定義了一個名為HelloWorldApp的新的組件（Component），並且使用了名為AppRegistry的內置模塊進行了“注冊”操作
* 組件本身結構可以非常簡單——唯一必須的就是在render方法中返回一些用於渲染結構的JSX語句。
*/
/* "use strict" --- 嚴格模式
* - 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提高編譯器效率，增加運行速度；
- 為未來新版本的Javascript做好鋪墊。
參考: http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html
* */
"use strict"
import React, { Component } from 'react';
import {
AppRegistry, // 注冊組件,是應用的JS運行入口
StyleSheet, // 樣式表, 類似於一個集合包含各個組件的屬性
Text, // 文本組件(類似於IOS的UILabel)
View // 視圖組件
} from 'react-native';
// 聲明一個 Helloworld 組件
class HelloWorld extends Component {
render() { // 渲染
return (
// 根視圖 , 然后根視圖上加載一個Text組件用來顯示 文本
<View style={styles.container}>
<Text style={styles.welcome}>
根視圖上加載Text組件並顯示一個段文字:Hello
</Text>
<Text style={styles.welcome}>
副標題
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: { // 根視圖的相關屬性設置,名字任意, 前后呼應為宜。以下設置參考:http://www.myexception.cn/flex/2040674.html
flex: 1, // 當一個元素定義了flex屬性時，表示該元素是可伸縮的（flex的屬性值大於0的時候才可伸縮）。
justifyContent: 'flex-start', // flex-start、flex-end、center、space-between、space-around
alignItems: 'flex-start', // flex-start、flex-end、center、space-between、space-around
// backgroundColor: '#F5FCFF',
backgroundColor: 'white',
},
welcome: {
backgroundColor: 'black', // 背景顏色
// padding: 10, // 內邊距(文字距離Text組件的邊距)
marginLeft: 10, // x 坐標 (外邊距-距離左邊) ------ 與根視圖的兩個屬性關聯justifyContent & alignItems
marginRight: 0,
marginTop: 50, // y 坐標 (外邊距-距離上邊) ------ 與根視圖的兩個屬性關聯justifyContent & alignItems
// fontFamily:'', // 字體名稱(楷體、方正等)
// fontStyle: '', // 字體樣式(粗體、斜體等)
fontSize: 20, // 字體大小
textAlign: 'left', // 字體排版 (auto、left、right、center、justify)
color:'red', // 字體顏色
// borderStyle: 'dashed',// 邊框樣式 (solid-固體/立方體、dotted-布滿的/打點的、dashed-虛線)
// borderColor:'red', //邊框顏色
// borderRadius: 9, // 邊框圓角
// shadowColor: "red", // Text組件的影子顏色
// shadowOffset: 10, // Text組件的影子傾斜度
// textShadowColor: "red", // 內容文本影子顏色
// tintColor: 'red', // 前置顏色(一般用不到)
// height: 85, // Text組件高度
// width: 350, // Text組件寬度
// maxHeight: 80, // Text組件最大高度,自適應寬度情況下用到
// maxWidth: 80, // Text組件最大寬度,自適應高度情況下用到
// margin: 10, // 距離四周都是 10
},
subTitle:{
backgroundColor: 'gray', // 背景顏色
marginLeft: 20, // x 坐標 (外邊距-距離左邊) ------ 與根視圖的兩個屬性關聯justifyContent & alignItems
marginTop: 100, // y 坐標 (外邊距-距離上邊) ------ 與根視圖的兩個屬性關聯justifyContent & alignItems
fontSize: 20, // 字體大小
textAlign: 'left', // 字體排版 (auto、left、right、center、justify)
color:'red', // 字體顏色
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
/*
* AppRegistry模塊則是用來告知React Native哪一個組件被注冊為整個應用的根容器。
* 一般在整個應用里AppRegistry.registerComponent這個方法只會調用一次
*/
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);