初级前端自学react-native,必备知识点(ES6+ReactJS+flexbox)
我们在学会搭建react-native环境之后,打开项目根目录,看到很多个文件,但是最起眼的应该就是那俩js兄弟文件了
我们一看那名字就知道,我们接下来的任务就是要弄它们:
我们用编辑器打开项目根目录下的index.android.js文件,可以看到有这么个东西:
那么我们先测试一下,在手机上跑起来。不知道大家还记不记得步骤:
第一步:在项目根目录下打开两个git bash.第一个输入:react-native start 这一步是在启用服务器
第二步:在第一步成功之后,连接手机,开启开发者模式,在第二个git bash 中输入:react-native run-android
等待几分钟就可以看到手机上显示的结果了:
你们可以看到代码的第12行到第21行,是不是就刚好是我们这个图片显示的内容呢!
我们可以把代码里Text组件里面的文字内容任意修改,然后reloadJs,就可以看到显示的界面跟着一起变了,是不是很神奇!
好了,不开玩笑,我们首先要弄懂怎么样写出这样的代码,我们还需要补充哪些知识点。
如果你没有接触过reactJS,我们首先要掌握的 第一个知识点:reactJS。
然后我们看到代码的第一行,得出我们需要掌握的 第二个知识点:ES6的新语法。
我们看下面这段代码:
很明显这是使用驼峰命名法设置css样式。
但是我们看到的justifyContent和alignItems是个什么东西,我们随便一查就知道,这是我们要学习的第三个知识点:flexbox而局
我们下面就来粗讲一下这三个知识点,为什么是粗讲?
因为我们只是为了react-native快速入门打基础,其他深层次的东西,我们用多了就熟了。
第一个知识点:ES6新特性
let和const
let可以声明具有块级作用域的变量,const是用来定义常量的。
for (let i=0; i<5; i++) {console.log('sm')
}console.log(i) // Error: i is not definedconst fix = {}fix.some = 'sm'
console.log(fix.some) // smfix = new Array(2, 3, 3) // Error: "fix" is read-only
const定义引用类型时,是指引用的地址不可变
arrow function
箭头函数,箭头函数可以简化匿名函数的写法,并且可以将this静态绑定到对象,而不会因运行上下文的变化而变化:
function Person() {this.name = 'Person'this.hello = () => {console.log(this.name)}
}var test = new Persontest.hello.bind({name: 'test'})() //Person
这里在箭头函数里,this对象已经静态绑定到Person这个对象了,不会随着运行上下文的改变而改变。
函数参数
默认值 Default
function plus(x, y=2333) {console.log(x + y)
}plus(4333) // 6666
...形参 Rest
可以通过...形参将参数转化为数组,跟arguments作用类似,只不过箭头函数内部是取不到arguments的值的
function sum(...values) {let result = 0for (let val of values) {result += val}return result
}console.log(sum(2, 3, 5)) //10sum(...[2, 3, 5]) //等价于 sum.apply(undefined, [2, 3, 5]) -> 10//所以可以直接这样用let arr = [45, 23, 4325]sum(...arr) // 等价于 sum.apply(undefined, arr) -> 4393
Destructuring 解构
解构赋值,按照一定的规则从数组和对象中提取值,对变量进行赋值
let [cat, dog] = [{hello: 'wang'},{hello: 'miao'}
]console.log(cat.hello) //wang//在取json数据时尤为方便let jsonData = {supplierId: '2333',name: 'ORZ',code: 6666
}let {supplierId: id, name, code} = jsonData
使用BABEL编译后变成这样
'use strict';var cat = { hello: 'wang' };
var dog = { hello: 'miao' };console.log(cat.hello); //wangvar jsonData = {supplierId: '2333',name: 'ORZ',code: 6666
};var id = jsonData.supplierId;
var name = jsonData.name;
var code = jsonData.code;
Template String
这个东西非常有用,在插入大段html内容到文档中时,显得很方便
let [cat, dog] = ['sss', 'mmm']console.log(`My cat's name is ${cat} and my dog's name is ${dog}`)
Class
使用Class语法糖可以很方便地实现类以及继承代码
class Person {constructor(name) {this.name = name}hello() {console.log(`My name is ${this.name}`)}
}class Student extends Person {constructor(name, studentNumber) {super(name)this.studentNumber = studentNumber}intro() {this.hello()console.log(`My student Number is ${this.studentNumber}`)}
}let student = new Student('hwen', 13)student.intro()
//My name is hwen
//My student Number is 13
super指代父类的实例(也即是父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。
这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。
Modules
在ES6之前,模块化的解决方案一般有两种:CommonJS(服务器端)和AMD(浏览器端,如require.js,但是在此之前,其实我也没用过它们),、
需要注意的是大括号里的变量名需与模块里export的接口名称相同,引入其他模块的默认值(default)可以直接写在大括号外
//some.js
export defalut 'worker'
export function sm() {return 'do something'
}
export const time = 1000*60*60//index.js
import people, { sm as something, time } from './some'let work = something()console.log(`${people} ${work} for ${time / (1000 * 60)} min`)
//worker do something for 60 min
详情-阮一峰的电子书:http://es6.ruanyifeng.com/#docs/intro
第二个知识点:reactJs
既然你敢说学react-native,应该不至于没了解过reactJS吧。
这已经是一个非常流行的框架,大家一定都有去了解一些相关知识,其实作为react-native入门,了解一些就够用了。
React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现!
JSX并不是一门新的语言,仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。,最后每个HTML标签都转化为JavaScript代码来运行。
其实我们需要掌握的东西不多,你只要能写出这个就够了,so easy!
整个代码的逻辑就是:
通过构建一个一个HelloMessage的组件,
组件的内容为一个h1标签,h1标签里输出hello+HelloMessage的name属性值+!我是wushaoxion
并将HelloMessage插入到id为example的div中。
输出的结果为:hello ReactJs! 我是wushaoxion
如果你想了解更多,或者你完全没接触过reactJs,可以去看看阮一峰的博客:http://www.ruanyifeng.com/blog/2015/03/react.html
第三个知识点:flexbox布局
这是最简单的一个内容了。但是我却很不好意思的放在了最后面。
flexbox是Flexible Box的缩写,弹性盒子布局主流的浏览器都支持。flexbox布局是伸缩容器(container)和伸缩项目(item)组成
Flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小。总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
伸缩容器有主轴和交叉轴组成!主轴既可以是水平轴,也可以是垂直轴
flexbox目前还处于草稿状态,所有在使用flexbox布局的时候,需要加上各个浏览器的私有前缀,即-webkit -moz -ms -o等
但是在做移动端页面的时候,这也是一个很不错的布局方式
伸缩容器的属性
1.display
display:flex | inline-flex 块级伸缩容器行内级伸缩容器
2.flex-direction
指定主轴的方向 flex-direction:row(默认值)| row-reverse | column | column-reverse
3.flex-wrap
伸缩容器在主轴线方向空间不足的情况下,是否换行以及该如何换行flex-wrap:nowrap(默认值) | wrap | wrap-reverse
4.flex-flow
是flex-direction和flex-wrap的缩写版本,它同时定义了伸缩容器的主轴和侧轴, row
5.justify-content
用来定义伸缩项目在主轴线的对齐方式,语法为:justify-content:flex-start(默认值)| flex-end | center | space-between | space-around
6.align-items
用来定义伸缩项目在交叉轴上的对齐方式,语法为:align-items:flex-start(默认值)| flex-end | center | baseline | stretch
7.align-content
用来调整伸缩项目出现换行后在交叉轴上的对齐方式,语法为:align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值)
我们暂且不必要了解太多,明白在RN中怎么使用就可以了
RN目前主要支持flexbox的如下6个属性:
1.alignItems
用来定义伸缩项目在交叉轴上的对齐方式,语法为:alignItems:flex-start(默认值)| flex-end | center | stretch
2.alignSelf
用来设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式,其语法为:alignSelf:auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器,如果交叉轴为垂直方向的话,只有在不设置高度的情况下才能看到效果)
3.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写,其语法为:flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数,默认值为:0 1 auto
4.flexDirection
指定主轴的方向 flex-direction:row| row-reverse | column(默认值)| column-reverse
5.flexWrap
6.justifyContent
如果你想学习关于flexbox更多的内容:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
以上这些都是react-native入门必备知识点,在计划学习react-native之前,赶紧充个电吧。
初级前端自学react-native,必备知识点(ES6+ReactJS+flexbox)相关推荐
- 前端自学学习笔记——ES5、ES6
前端自学学习笔记--ES5.ES6 文章目录 前端自学学习笔记--ES5.ES6 1.面向过程与面向对象 1.1面向过程 1.2面向对象 1.3面向过程与面向对象对比 2.对象与类 2.1对象 2.1 ...
- 混合开发架构|Android工程集成React Native、Flutter、ReactJs
混合开发架构|Android工程集成React Native.Flutter.ReactJs 架构设计说明 创建安卓原生工程 创建Flutter 集成嵌入原生工程 创建React Native 解决R ...
- Web前端:React Native Web与React — 比较指南
React 是Facebook开发的用于构建交互式用户界面的JavaScript库.React 在 Apache 许可下作为开源软件提供,可用于个人和商业网站.客户端 Web 应用程序和服务器应用 ...
- React Native面试知识点
本文原创首发于公众号:ReactNative开发圈,转载需注明出处. 本文会不定期不断更新,想查看最新版本请移步至https://github.com/forrest23/react-native-i ...
- 前端知识 | React Native Animated动画浅谈
在移动开发中,动画能有效的提高用户体验.在 React Native 中,也有相应的 API 供我们做动画.这里着重说一下 Animated 动画库,它可以让我们非常简便的去实现各式各样的动画和交互方 ...
- React Native中常用ES6语法
一:模块导入导出 //ES6 import React, { Component,PropTypes, } from 'react'; import {Image,Text } from 'react ...
- 前端自学笔记(五)ES6 - (1)
ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript ...
- 初识React Native 必备
ReactNative 开发技术栈 1. 熟悉开发环境搭建及RN基础开发知识 参考网址: https://reactnative.cn/ 建议使用IntelliJ IDEA作为开发工具2. 熟悉 Ja ...
- 前端知识 | React Native手势响应浅析
目前手机市场上,全面屏时代已经势不可挡,为了增大屏幕,一个个物理按键已渐渐消失在手机上.那么,手势将成为在移动应用开发中一个重要的组成部分,移动设备上手势识别要比 web 端复杂得多,往往用户的一个手 ...
最新文章
- 日志服务SLS 助力识货 APP,解决业务数据采集查询监控问题
- 《OpenGL编程指南(原书第8版)》——计算着色器
- 雷军和董明珠“十亿赌局”胜负已定:小米格力营收差距依然很大
- 协议圣经 -协议之服务编写(九)
- .NET Core 3.0带来桌面支持(Windows Only)
- 0_freeCAD_介绍,下载,语言设置
- win10台式机,耳机插入没有声音
- aliddns ipv6_IPv6 + aliddns 实现群晖外网控制
- 浅析激光导航agv的市场前景
- python 线性插值处理_详解Python实现线性插值法
- 代理模式简介与实现 - delegate
- CDH存在隐患 : 该角色的进程使用的交换内存为xx兆字节。警告阈值:200字节
- *****DOS·FOR·语句·学习·指南*****
- python turtle 绘制北京天安门
- 旧电脑怎么升级到新版Win10
- VS2010的aspx文件中的html代码的格式化整理的方法
- 网络直播平台近些年发展
- 我是如何从桌面维护转到Linux系统运维
- 分享130个ASP源码,总有一款适合您
- office 2013下载
热门文章
- 【PyTorch】PyTorch神经网络实战入门
- java文件输出流,写到.txt文件,如何实现换行
- 荣之学教育简述Shopee虾皮账号被冻结,最常见的2种原因
- Android中给定一个日期判断是周几.
- HTML层叠样式表(CSS)
- jquery点击图片放大,再点缩小(转)
- Latex中参考文献的写作方法
- 刘鹏教授接受新华日报财经客户端采访:智能制造应用落地生根,“江苏智造”进入快速增长期...
- dedecms织梦模板|响应式粉红色母婴月嫂源码 母婴育儿类网站模板(自适应手机版)
- 安卓沉浸式状态栏_安卓平板也能有品质感,小新Pad Pro上手