React Native編譯器的配置以及基礎知識

　　入職新公司，這邊打算採用RN來寫界面，因此學習一波這一塊的知識。

　　採用的是WebStorm來編譯，據同事說，比他採用atom編譯要多不少語法提示。
　　下載地址：https://www.jetbrains.com/webstorm/
　　安裝以後須要破解：http://blog.csdn.net/zhalcie2011/article/details/57409082
　　進入WebStorm，進行基礎配置，諸如RN語法高亮等：http://blog.csdn.net/xiangzhihong8/article/details/52293896
　　語法提示插件：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
　　配置完成以後，RN相關Api、關鍵字等都有提示，算是比較友好了。

　　RN項目基礎配置　　　　

import React, {Component} from 'react';

import
{
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

 import與iOS一致，是導入組件or面向組件，其中默認組件是不須要{}包裹起來的，好比說React，可是Component、Appregistry、Text等組件都是非默認組件，因此須要用{}包裹起來。

class MyApp extends Component {
    render() {
        var str = 'ppppppppppppppp';
        return (

            <View style={{backgroundColor: 'red', flex: 1}}>
                <Text style={{flex: 1}}>{str}</Text>
            </View>
        )
    }
}

上面的代碼是自定義程序入口組件，相似於[[UIView alloc] init]，當一個組件要顯示的時候，就會自動調用render方法，渲染組件。extends關鍵字意味着繼承自哪一個類，這是ES6的語法，建議在看RN具體代碼時，過一遍JS與ES6的語法。

 

我在學習的時候，有一點老是弄不清楚，不知道何時要加{}，何時不加；也不知道何時加()，何時不加？

　　一、包裝對象的時候使用{}，在JS中，對象就是這麼寫的 {x: 100, y: 100, method: function() {} } 

　　二、表達式都須要使用{}，在上述的代碼中，<View style={}.....    這就是一個賦值表達式，因此須要一個{}，那麼爲何{}裏面還有{}呢？{flex: 1}這是個對象了，因此須要{}包裹起來

　　三、變量也須要用{}包裹起來，好比上面的<Text style={{flex: 1}}>{str}</Text>中str是個變量，因此包裹起來顯示，若是不包裹，那麼text就是直接顯示str。

　　四、在包裹組件標籤的時候，必須使用()，上面return () 裏面的代碼，就是組件標籤。

 

var styles = StyleSheet.create({
    font: {
        fontWeight: 'bold',
        color: 'green',
        fontSize: 14,
    },
});

　　　　上面是樣式表、組件外觀等配置。也能夠直接像html那般，寫在組件裏面，例如：<View style={{backgroundColor: 'red', flex: 1}}>。

　　　　

AppRegistry.registerComponent('MyApp', ()=> MyApp);

註冊程序入口組件，註冊哪一個組件、程序啓動的時候就會自動去加載註冊組件。

第一個參數：模塊名稱,隨意填，可是必須與iOS模塊名稱一致，負責會報找不到組件入口的錯誤，這裏的模塊名是'MyApp'

第二個參數：函數,箭頭函數ES6的語法，須要返回組件類名。

(箭頭函數：=> 左邊：函數參數，右邊：函數返回值)

 

在學習過程當中，沒有感受到RN的佈局有什麼困難的地方，就不記錄了，下次更新prop與state、傳值等知識。