React-Native入門指南(三) ——CSS和UI佈局

React-Native入門指南

github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript開發你的原生應用，釋放Native的UI體驗，體驗 Hybird開發效率。

最近一個星期寫的文章以下，連接是github page的，其實也能夠在系列博客找到相應文章：

• Lession1: Hello React-Native
• Lession2: 認識代碼結構
• Lession3: css和佈局
• Lession4: 學會React-Native佈局（一）
• Lession5: 學會React-Native佈局(二)
• Lession6: UI組件
• Lession7: JSX在React-Native中的應用

還有幾篇會時刻更新：

• Lession8: 本身動手寫組件
• Lession9: 模塊化開發
• Lession10: 搭建項目架構
• Lession11: 源碼分析

第3篇CSS和UI佈局

1、瞭解React-Native組件

做爲開發者都知道，UI組件對於一個應用的重要性。也許，在一款應用中，你尚未完整的，有體系的構建UI組件，可是你必定或多或少有種想把組件抽出來的衝動，就像有些衝動是人類的本能同樣....這是做爲一個開發者的本能。那麼組件的複用和統一話是十分必要的。常見的組件有：日曆、下來列表（常在應用中表現爲下拉刷新）、導航欄、頭部、底部、選項卡等等。React-Native就提供了一套iOS原生的組件，這樣就不用HTML5去模擬組件了。React-Native使用css來構建頁面佈局，使用Native iOS Components給咱們提供強大的組件功能。目前已有組件以下圖：

2、使用CSS樣式 & Flexbox佈局

第一篇，已經知道了如何構建工程。這裏一樣建立一個HelloWorld工程。默認啓動界面以下圖：

一、基本樣式
這裏使用View和Text組件做爲演示對象，首先，修改index.ios.js裏面的代碼，這裏只須要關注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);
這時候，你cmd + R刷新模擬器應該看到是空白的界面。如今，是展示css魅力的時候了。React-native使用的css 表達是一個JS自面量對象，而且嚴格區分該對象屬性的類型，因此要遵循對象的寫法，而不能使用之前css的寫法，這個須要本身熟悉了。
（1）增長一個帶邊框的矩形，紅色邊框
    直接在組件上添加樣式是這樣的：style={{height:40, borderWidth: 1, borderColor: 'red'}}style是組件的一個自有屬性，第一個{}JS執行環境或者說是模板，第二個{}只是css樣式對象的括號而已(慢慢體會,不難理解)。這樣修改後的代碼以下：
    render: function() {
        return (
            <View>
                <View style={{height:40, borderWidth: 1, borderColor: 'red'}}>

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

(2)如何知道該組件支持哪些樣式呢？
    上面的已經很簡單了，做爲web開發者用腳趾頭都能閉眼寫出來。若是咱們須要知道該組件又哪些樣式，又不用查手冊，一個最爲簡單的方法是，在樣式表裏寫錯一個屬性，好比我寫一個沒有的屬性「border」。可是該屬性必須寫到樣式的建立中去，而不能寫爲內聯樣式。寫成內聯樣式，你是看不到報錯提示的。我門改寫成樣式表建立類裏面：
    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',
        }
    });
     這個時候你就能齊刷刷的看到樣式表的報錯和提示有哪些樣式了，以下圖所示：

（3）獨立樣式類
    其實上面已經展現了獨立樣式類了，那麼樣式類建立很簡單，咱們只須要使用React.StyleSheet來建立類。其實建立的類就是一個js對象而已。那麼在組件上引用是這樣的<View style={{對象名稱.對象屬性}}></View>，就跟上面（2）的代碼同樣。

    二、說說Flexbox佈局
    其實，這樣的css樣式，做爲web開發這一用就會，那麼說說佈局的事兒。除去margin, padding, position等你們熟悉的web佈局的話，最爲重要的就是flexbox，目前支持的屬性以下,有6個：

(1)先說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',
            }
        });
        當一個(元素)組件，定義了flex屬性時，表示改元素是可伸縮的。固然flex的屬性值是大於0的時候才伸縮，其餘小於和等於0的時候不伸縮，例如：flex:0, flex:-1等。上面的代碼，最外層的view是可伸縮的，由於沒有兄弟節點和他搶佔空間。裏層是3個view,能夠看到三個view的flex屬性加起來是5+5+10=20,因此第一個view和第二個view分別佔1／4伸縮空間， 最後一個view佔據1／2空間，具體以下圖：

(2) flexDirection
    flexDirection在React-Native中只有兩個屬性，一個是row(橫向伸縮)和column(縱向伸縮)。具體的想過可見以下代碼：
    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',
        }
    });
    具體的效果以下：

(3)alignSelf:對齊方式
    alignSelf的對齊方式主要有四種：flex-start、 flex-end、 center、  auto、 stretch。看看代碼，應該就很清楚了：

效果以下圖

（4）水平垂直居中
    alignItems是alignSelf的變種，跟alignSelf的功能相似，可用於水平居中；justifyContent用於垂直居中，屬性較多，能夠了解下。

效果以下圖