第3篇CSS和UI布局

一、了解React-Native組件

作為開(kāi)發(fā)者都知道，UI組件對(duì)于一個(gè)應(yīng)用的重要性。也許，在一款應(yīng)用中，你還沒(méi)有完整的，有體系的構(gòu)建UI組件，但是你一定或多或少有種想把組件抽出來(lái)的沖動(dòng)，就像有些沖動(dòng)是人類(lèi)的本能一樣....這是作為一個(gè)開(kāi)發(fā)者的本能。那么組件的復(fù)用和統(tǒng)一化是十分必要的。常見(jiàn)的組件有：日歷、下拉列表（常在應(yīng)用中表現(xiàn)為下拉刷新）、導(dǎo)航欄、頭部、底部、選項(xiàng)卡等等。React-Native就提供了一套iOS原生的組件，這樣就不用HTML5去模擬組件了。React-Native使用css來(lái)構(gòu)建頁(yè)面布局，使用Native iOS Components給我們提供強(qiáng)大的組件功能。目前已有組件如下圖：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_1.png" alt="組件列表" />

二、使用CSS樣式 & Flexbox布局

第一篇，已經(jīng)知道了如何構(gòu)建工程。這里同樣創(chuàng)建一個(gè)HelloWorld工程。默認(rèn)啟動(dòng)界面如下圖：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_2.png" alt="默認(rèn)界面" />

1、基本樣式
這里使用View和Text組件作為演示對(duì)象，首先，修改index.ios.js里面的代碼，這里只需要關(guān)注StyleSheet和render里面的模板。修改后的代碼如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var HelloWorld = React.createClass({
    render: function() {
        return (
            <View>
                <View></View>
            </View>
        );
    }
});

var styles = StyleSheet.create({
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
這時(shí)候，你cmd + R刷新模擬器應(yīng)該看到是空白的界面。現(xiàn)在，是展現(xiàn)css魅力的時(shí)候了。React-native使用的css 表達(dá)是一個(gè)JS自面量對(duì)象，并且嚴(yán)格區(qū)分該對(duì)象屬性的類(lèi)型，所以要遵循對(duì)象的寫(xiě)法，而不能使用以前css的寫(xiě)法，這個(gè)需要自己熟悉了。
（1）增加一個(gè)帶邊框的矩形，紅色邊框
    直接在組件上添加樣式是這樣的：style={{height:40, borderWidth: 1, borderColor: 'red'}}style是組件的一個(gè)自有屬性，第一個(gè){}JS執(zhí)行環(huán)境或者說(shuō)是模板，第二個(gè){}只是css樣式對(duì)象的括號(hào)而已(慢慢體會(huì),不難理解)。這樣修改后的代碼如下：
    render: function() {
        return (
            <View>
                <View style={{height:40, borderWidth: 1, borderColor: 'red'}}>

                </View>
            </View>
        );
    }
    cmd ＋ R刷新模擬器，結(jié)果如下：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_3.png" alt="基本css" />

    (2)如何知道該組件支持哪些樣式呢？
    上面的已經(jīng)很簡(jiǎn)單了，作為web開(kāi)發(fā)者用腳趾頭都能閉眼寫(xiě)出來(lái)。如果我們需要知道該組件有哪些樣式，又不想查手冊(cè)，一個(gè)最為簡(jiǎn)單的方法是，在樣式表里寫(xiě)錯(cuò)一個(gè)屬性，比如我寫(xiě)一個(gè)沒(méi)有的屬性“border”。但是該屬性必須寫(xiě)到樣式的創(chuàng)建中去，而不能寫(xiě)為內(nèi)聯(lián)樣式。寫(xiě)成內(nèi)聯(lián)樣式，你是看不到報(bào)錯(cuò)提示的。我們改寫(xiě)成樣式表創(chuàng)建類(lèi)里面：
    var HelloWorld = React.createClass({
        render: function() {
                return (
                    <View>
                        <View style={styles.style_1}>

                        </View>
                    </View>
                );
        }
    });

    var styles = StyleSheet.create({
        style_1:{
            border: '1px solid red',
            height:40,
            borderWidth: 1,  
            borderColor: 'red',
        }
    });
     這個(gè)時(shí)候你就能齊刷刷地看到樣式表的報(bào)錯(cuò)和提示有哪些樣式了，如下圖所示：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_4.png" alt="樣式列表" />

    （3）獨(dú)立樣式類(lèi)
    其實(shí)上面已經(jīng)展示了獨(dú)立樣式類(lèi)了，那么樣式類(lèi)創(chuàng)建很簡(jiǎn)單，我們只需要使用React.StyleSheet來(lái)創(chuàng)建類(lèi)。其實(shí)創(chuàng)建的類(lèi)就是一個(gè)js對(duì)象而已。那么在組件上引用是這樣的<View style={{對(duì)象名稱.對(duì)象屬性}}></View>，就跟上面（2）的代碼一樣。

    2、說(shuō)說(shuō)Flexbox布局
    其實(shí)，這樣的css樣式，作為web開(kāi)發(fā)者一用就會(huì)，那么說(shuō)說(shuō)布局的事兒。除去margin, padding, position等大家熟悉的web布局的話，最為重要的就是flexbox，目前支持的屬性如下,有6個(gè)：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_5.png" alt="flexbox" />

     (1)先說(shuō)flex屬性，上一段代碼
        var HelloWorld = React.createClass({
            render: function() {
                return (
                    <View style={styles.style_0}>
                        <View style={styles.style_1}></View>
                        <View style={styles.style_1}></View>
                        <View style={{flex:10}}></View>
                    </View>
                );
            }
        });

        var styles = StyleSheet.create({
            style_0:{
                flex:1,
            },
            style_1:{
                flex: 5,
                height:40,
                borderWidth: 1,  
                borderColor: 'red',
            }
        });
        當(dāng)一個(gè)(元素)組件，定義了flex屬性時(shí)，表示該元素是可伸縮的。當(dāng)然flex的屬性值是大于0的時(shí)候才伸縮，其小于和等于0的時(shí)候不伸縮，例如：flex:0, flex:-1等。上面的代碼，最外層的view是可伸縮的，因?yàn)闆](méi)有兄弟節(jié)點(diǎn)和它搶占空間。里層是3個(gè)view,可以看到三個(gè)view的flex屬性加起來(lái)是5+5+10=20,所以第一個(gè)view和第二個(gè)view分別占1／4伸縮空間， 最后一個(gè)view占據(jù)1／2空間，具體如下圖：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_6.png" alt="flex" />

    (2) flexDirection
    flexDirection在React-Native中只有兩個(gè)屬性，一個(gè)是row(橫向伸縮)和column(縱向伸縮)。具體的效果可見(jiàn)如下代碼：
    var HelloWorld = React.createClass({
        render: function() {
            return (
                <View style={styles.style_0}>
                    <View style={styles.style_1}>
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
                </View>
                <View style={[styles.style_1, {flexDirection: 'column'}]}>
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
                    <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
                </View>
                <View style={{flex:10, borderWidth: 1, borderColor: 'red',}}>
                    <Text style={{marginTop:40, fontSize:25}}>1／2高</Text>
                    </View>
                </View>
            );
        }
    });

    var styles = StyleSheet.create({
        style_0:{
            flex:1,
        },
        style_1:{
            flex: 5,
            flexDirection: 'row',
            height:40,
            borderWidth: 1,  
            borderColor: 'red',
        }
    });
    具體的效果如下：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_7.png" alt="flex" />

    (3)alignSelf:對(duì)齊方式
    alignSelf的對(duì)齊方式主要有四種：flex-start、 flex-end、 center、  auto、 stretch?？纯创a，應(yīng)該就很清楚了：

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_8.png" alt="flex" />

    效果如下圖

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_9.png" alt="flex" />

    （4）水平垂直居中
    alignItems是alignSelf的變種，跟alignSelf的功能類(lèi)似，可用于水平居中；justifyContent用于垂直居中，屬性較多，可以了解下。

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_10.png" alt="flex" />

    效果如下圖

http://wiki.jikexueyuan.com/project/react-native-lesson/images/3_11.png" alt="flex" />