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

時間 2019-11-07

標籤小時學會基於 reactmix 框架 reactnativeapp 開發 css+html css html 第一個 app 頁面欄目 CSS 简体版

原文原文鏈接

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

首先咱們要準備瞭解的基本知識以下，在H5開發中，咱們的頁面佈局方式有html

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

2. 浮動佈局（Float）react

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

4. Flex佈局github

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

另外，在H5中，咱們css屬性值是有單位的，在ReactNative中沒有，ReactMix幫助咱們解決這個問題，他做爲語法糖支持了CSS的屬性值單位問題，使得咱們能夠像寫 css同樣寫12px, 12pt, 12em, 12rem，且這些單位有實際效力瀏覽器

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

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成這樣

啓動，查看效果以下

瀏覽器./web/index.html

iOS，啓動模擬器

安卓啓動模擬器

Ok，讓咱們再把頁面作複雜一點，修改demo.js以下

$$GI0~L{UY[Q)DBSGL1_NVF6$

接着修改CSS，使用一些className的組合嵌套

$2D{CL(~9ATA904_JWT%[1NB$

接着查看效果

Ok，符合預期，三個平臺表現基本一致。

本週休息一週，ReactMix平臺最近版本變動很是頻繁，但願你們能關注這個新新的框架。咱們會持續努力~！