12小時包你學會基於ReactMix框架的ReactNativeApp開發（二）基於Css+HTML寫第一個app頁面

本文轉載自查看原文 2016-01-15 19:47 2387 react-native

上一篇文章，大家對於ReactMix(https://github.com/xueduany/react-mix)框架有了一個基本認識，知道我們是一個語法糖，幫助大家基於一套代碼，所有平台都能跑。那么今天就是來實戰一下，寫一個所有平台都能跑的頁面出來。

首先我們要准備了解的基本知識如下，在H5開發中，我們的頁面布局方式有

1. 默認布局（塊狀元素和內聯元素）

2. 浮動布局（Float）

3. 定位布局（position: relative, absolute, top, left, right, bottom）

4. Flex布局

在ReactNative中，我們能用到的是1,3,4，沒有2

另外，在H5中，我們css屬性值是有單位的，在ReactNative中沒有，ReactMix幫助我們解決這個問題，他作為語法糖支持了CSS的屬性值單位問題，使得我們可以像寫 css一樣寫12px, 12pt, 12em, 12rem，且這些單位有實際效力

px即像素，pt即磅，em即默認字體大小，默認是16px, rem即可變字體大小，隨屏幕大小而不斷變化，這個單位以后會非常重要，使我們解決iOS常見的設備適配問題的關鍵，有了他，媽媽再也不用擔心我的設備適配問題了

Ok，那我們先創建一個空白頁面，首先新建一個demo.js

(class Test extends App{
    render(){
        return (
            <Body>
                <Div>
                    HelloWorld!
                </Div>
            </Body>
        );
    }
}).run();

這里有個概念提交一下，熟悉ReactNative的同學，可能知道，在ReactNative里面，app啟動，需要在AppRegist里面注冊，任何app內的應用都有一個主入口，所以ReactMix封裝了一個入口函數，兼容不同平台的實現，對於開發者來說只需要繼承與App類，頁面作為一個靜態類，執行自己的run方法，就可以在app展現了

對於開發者來說，你只需要像以上寫法一樣，寫一個自己的靜態類，繼承與App即可

然后按照ReactJS的模板，在render方法里面返回一段jsx的語法（未來會支持直接基於HTML做翻譯，現階段因為React 比較流行，所以還是基於ReactJs的模板方式）

接着，我們在./css目錄里面創建一個test.css文件，寫入樣式

#J1 {
color: red;
}
.J2 {
background-color: yellow;
}

然后打開命令行，輸入node react.css.build.js，

你可以看到css被同步編譯test.js到./reactnative/css目錄里面，生成了一個對應的test.js文件

$B{_S94{PGABCKNN5H@72BXY$

然后，在我們的剛才的./reactnative/demo.js文件里面，引入這個css文件，

輸入includeCSS(“require(‘./css/test’)”)

這里可能會奇怪，為什么會有2層字符串，原理是這樣的，在reactnative里面，我們實際需要的是./reactnative/css/test.js這個文件，而不是./css/test這個文件，在reactnative的加載機制，他按照字符串關鍵字做import的，所以不需要require語法執行，那么我們只要用一個字符串的require就可以實現加載，但是在H5中，加載css，我們是需要知道他的位置，創建link添加到head中去的，所以會有這么一個奇怪的兼容寫法，后面我們說高級技巧的時候，會有一篇專門的章節，重點介紹這個

引入css之后，我們需要給div節點標記id和className，我們修改demo.js成這樣