0%

最近要使用一个支付的 SDK,纯 Swift 写的,用 CocoaPods 引入之后,怎么都找不到 Adyen-Swift.h文件,新建一个工程之后,在 Podfile中添加use_frameworks!就能找到。

最后通过@import Adyen解决的。

并不知道为什么!

是 JavaScript 的超集,有类型系统、接口、泛型、Decorators、丰富的配置选项。

TypeScript

[TOC]

flex

数值,子元素的主轴填充,一个区域根据每个元素 flex 值的和进行划分。

flexDirection

主轴方向。

column(默认)

竖直方向上对齐。

column-reverse

竖直方向下对齐。

row

水平方向左对齐。

row-reverse

水平方向右对齐。

justifyContent

子元素在主轴上的排列方式。

主轴没有 stretchbaseline属性。

flex-start(默认)

左对齐或上对齐。

flex-end

右对齐或下对齐。

center

居中对齐。

space-between

无边距的平均分布。

space-around

有边距的平均分布。

space-evenly

完全平均分布。

alignItems

子元素在次轴上的排列方式,只作用于当前行或当前列(可换行时)。

次轴没有space-betweenspace-aroundspace-evenly属性。

streach(默认)

主轴方向上完全拉伸,如果设置了宽度 or 高度则失效。

stretch

flex-start

左对齐或上对齐。

flex-start

flex-end

右对齐或下对齐。

center

居中对齐。

baseline

左对齐或上对齐,基线为所有元素的最高点。

baseline

flexWrap

nowrap

不换行。

wrap

换行。

wrap

wrap-reverse

逆序换行。

alignContent

子元素在次轴上的排列方式,全局而非当前行或当前列,只在可换行时有效。

flexBasis

数值,主轴的默认宽度 or 高度,如果同时设置了宽度 or 高度,会覆盖宽度 or 高度。

flexGrow

数值,填充剩余可用空间,0为默认值,相当于没有设置该属性,可为>=0的浮点数,小于1的值代表占据宽度或高度的比例。

flexGrow

flexShrink

数值,没有设置换行时,部分元素会被挤出屏幕,设置该属性为1后可为当前元素分配剩余可用空间。

flexShrink-1

flexShrink-2

flexShrink-3

top bottom left right position

后布局的元素会覆盖先布局的元素。

position

relative

相对位置,默认值。

absolute

绝对位置,会影响其他子元素。

top-1

top-2

bottom

left

right

absolute

relative

[TOC]

1 小时入门教程(购物清单 常用组件)

https://www.youtube.com/watch?v=Hf4MJH0jDb4

iOS 模拟器快捷键失效

1
I/O -> Input -> Send Keyboard Input to Device

Web 调试快捷键

1
⌥ + ⌘ + I

2 小时入门教程(VS Code 插件、Web 调试、VS Code 调试)

https://www.youtube.com/watch?v=0-S5a0eXPoc

VS Code 插件

1
2
3
4
React Native Tools
React-Native/React/Redux
Prettier
Material Icon Theme

Redux Snippets

rsf

引入模块 & 创建函数

rnss

创建 StyleSheet

VS Code 快捷键

⌘ + D

选中文本,点击 ⌘ + D 可多选相同的文本

⌥ + ↑ / ⌥ + ↓

选中文本,点击 ⌥ + ↑⌥ + ↓ 移动位置

⇧ + ⌥ + ↑ / ⇧ + ⌥ + ↓

选中文本,点击 ⇧ + ⌥ + ↑⇧ + ⌥ + ↓拷贝一份相同内容

为什么要使用 StyleSheet

  1. 运行时会检查拼写
  2. Facebook 做了优化

var let const

let 不能声明多次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var i = "global";

function test () {
var i = "function";
console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"global"
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var i = "global";

function test () {
i = "function";
console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"function"
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
function test () {
i = "function";
console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"function"
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let i = "global";
function test () {
let i = "function";
console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"global"
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let i = "global";
function test () {
i = "function";
console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"function"
*/
1
2
3
4
5
6
7
8
9
10
11
12
function test () {
let i = "function";
console.log(i);
}

test();
console.log(i);

/*
console log:
Uncaught ReferenceError: i is not defined
*/

Object.freeze()

undefined null

===

!==

Array

push pop

shift unshift

Math.random()

Math.floor()

parseInt()

字符串 -> 数值

Arrow Function

匿名函数

Rest Operator

参数封装为数组

Spread Operator

深拷贝

use strict

import requires

import * as … from …

export default

默认导出,引用时无需使用 {}

import subtract from …

手机型号 屏幕尺寸 逻辑分辨率(pt) 物理分辨率(px) 倍图
4/4s 3.5 inch 320*480pt 640*960px @2x
5/5c/5s/SE 4.0 inch 320*568pt 640*1136px @2x
6/6s/7/8/SE2 4.7 inch 375*667pt 750*1334px @2x
6 Plus/6s Plus/7 Plus/8 Plus 5.5 inch 414*736pt 1242 * 2208px @3x
X/XS/11 Pro 5.8 inch 375*812pt 1125* 2436px @3x
XR/11 6.1 inch 414*896pt 828* 1792px @2x
XS Max/11 Pro Max 6.5 inch 414*896pt 1242* 2688px @3x
12 mini 5.4 inch 360*780pt 1080* 2340px @3x
12/12 Pro 6.1 inch 390*844pt 1170* 2532px @3x
12 Pro Max 6.7 inch 428*926pt 1284* 2778px @3x