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平台最近版本变动很是频繁，但愿你们能关注这个新新的框架。咱们会持续努力~！