12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面_html/css_WEB-ITnose
上一篇文章,大家对于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 (
HelloWorld!
);
}
}).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文件
然后,在我们的刚才的./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如下
接着修改CSS,使用一些className的组合嵌套
接着查看效果
Ok,符合预期,三个平台表现基本一致。
本周休息一周,ReactMix平台最近版本变更非常频繁,希望大家能关注这个新新的框架。我们会持续努力~!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...
