Live Note

Remain optimistic

Posted on Edited on In

示例

certificate

main.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import Svg, {
  Rect,
  Text as SvgText,
  Path,
  LinearGradient as SvgLinearGradient,
  Stop,
  Defs,
  Line,
} from "react-native-svg";
import BuildingSvg from "./BuildingSvg";
<Svg height="500" style={{ marginHorizontal: 16 }} width={wp(100) - 16 * 2}>
  <Defs>
    <SvgLinearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <Stop offset="0%" stopColor="#835927" />
      <Stop offset="50%" stopColor="#C08035" />
      <Stop offset="100%" stopColor="#835927" />
    </SvgLinearGradient>
  </Defs>
  <BuildingSvg />

  <Rect
    x="10"
    y="10"
    width="95%"
    height="95%"
    stroke="#DAA520"
    strokeWidth="5"
    fill="none"
    rx="10"
    ry="10"
  />
  <Path
    d="M20,40 L360,40 M20,460 L360,460 M40,20 L40,480 M340,20 L340,480"
    stroke="#DAA520"
    strokeWidth="2"
  />
  <SvgText
    x="50%"
    y="80"
    fontSize="20"
    fontWeight="bold"
    textAnchor="middle"
    fill="url(#textGradient)"
  >
    Certificate of Honor
  </SvgText>
  <SvgText x="50%" y="120" fontSize="16" textAnchor="middle" fill="#835927">
    Proudly Persented to
  </SvgText>
  <SvgText
    x="50%"
    y="180"
    fontSize="24"
    fontWeight="bold"
    textAnchor="middle"
    fill="#835927"
  >
    Edward
  </SvgText>
  <Line x1="35%" y1="184" x2="65%" y2="184" stroke="#835927" strokeWidth="2" />
  <SvgText x="50%" y="250" fontSize="18" textAnchor="middle" fill="#835927">
    We acknowledge your dedication
  </SvgText>
  <SvgText x="50%" y="270" fontSize="18" textAnchor="middle" fill="#835927">
    and applaud your success as
  </SvgText>
  <SvgText x="50%" y="290" fontSize="18" textAnchor="middle" fill="#835927">
    a distinguished trader
  </SvgText>
  <SvgText x="50%" y="310" fontSize="18" textAnchor="middle" fill="#835927">
    in the cryptocurrency market.
  </SvgText>
  <SvgText
    x="50%"
    y="450"
    fontSize="16"
    textAnchor="middle"
    fill="url(#textGradient)"
  >
    NO. 10020123
  </SvgText>
</Svg>;
Read more »

Posted on Edited on In
  1. 从 Reflect 对象上可以获得语言内部的方法
  2. 修改某些 Object 方法的返回结果，让其变得更合理。比如 Object.defineProperty 在无法定义属性时会抛出一个错误，而 Reflect.defineProperty 则会返回 false
  3. 让 Object 操作都变成函数行为。
  4. 只要是 Proxy 对象的方法，就能在 Reflect 对象上找到相应的方法，无论 Proxy 怎么修改默认行为，总可以在 Reflect 上获取默认行为

静态方法

  • Reflect.apply(target, thisArg, args)
    等同于 Function.prototype.apply.call(func, thisArg, args)，用于绑定 this 对象后执行给定函数。

  • Reflect.construct(target, args)
    等同于 new target(…args)，提供了一种不使用 new 来调用构造函数的方法：

    1
    2
    3
    4
    5
    6
    7
    8
    function Greeting(name) {
      this.name = name
    }
    //new 的写法
    const instance = new Greeting("张三")

    //Reflect.construct 写法
    const instance = Reflect.construct(Greeting, ["张三"])
Read more »

Posted on Edited on In

先行断言

  • lookahead assertion：x在y之前才匹配，格式为/x(?=y)/
  • negative lookahead assertion：只有x不在y之前才匹配，格式为/x(?!y)/
1
2
3
4
let str = 'now is 02:11:44'

/\d+(?=:)/.exec(str) // ['02']
/\d+(?!\.)/.exec(str) // ['0']
Read more »

Posted on Edited on In

Custom Scroll Indicator for ScrollView

Demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React, { useMemo, useState } from "react"
import { ScrollView, View } from "react-native"

const Demo: React.FC = () => {
  const [contentSize, setContentSize] = useState(0)
  const [scrollViewSize, setScrollViewSize] = useState(0)
  const [scrollPosition, setScrollPosition] = useState(0)

  const indicatorWidth = useMemo(() => {
    if (contentSize > 0 && scrollViewSize > 0) {
      return (scrollViewSize / contentSize) * scrollViewSize
    }

    return 0
  }, [contentSize, scrollViewSize])

  const indicatorPosition = useMemo(() => {
    if (contentSize > 0 && scrollPosition > 0) {
      return (scrollPosition / contentSize) * scrollViewSize
    }

    return 0
  }, [contentSize, scrollPosition, scrollViewSize])

  return (
    <View>
      <ScrollView
        // disable default scroll indicator
        showsHorizontalScrollIndicator={false}
        onLayout={(event) => {
          setScrollViewSize(event.nativeEvent?.layout?.width ?? 0)
        }}
        onContentSizeChange={(w) => {
          setContentSize(w)
        }}
        horizontal // set horizontal scroll
        scrollEventThrottle={16} // throttle scroll event to improve performance
        onScroll={(event) => {
          // change scroll position here
          const { contentOffset } = event.nativeEvent

          const { x = 0 } = contentOffset
          const max = contentSize - scrollViewSize
          const min = 0

          if (x > max) {
            setScrollPosition(max)
          } else if (x < min) {
            setScrollPosition(min)
          } else {
            setScrollPosition(x)
          }
        }}
      >
        {/* Content here */}
      </ScrollView>

      {/* custom scroll indicator */}
      <View
        style={{
          bottom: 0,
          height: 4,
          width: indicatorWidth,
          position: "absolute",
          left: indicatorPosition,
          borderRadius: 4,
          backgroundColor: "#EEEEEE",
        }}
      />
    </View>
  )
}

export default Demo

Posted on Edited on In

基本用法

Set 类似于数组，但是成员的值都是唯一的，没有重复。Set 本身是一个构造函数。

1
2
3
4
5
6
7
8
9
10
11
const set = new Set()
;[1, 2, 3, 4].forEach((x) => set.add(x))
for (let value of set) {
  console.log(value) //1, 2, 3, 4
}

const set = new Set([1, 2, 3, 4])
;[...set] //[1, 2, 3, 4]

//数组除重
;[...new Set(array)]

在 Set 内部，NaN 是相等的，两个对象总是不相等的。

1
2
3
4
5
6
7
8
let set = new Set()
let a = NaN
let b = NaN
set.add(a).add(b)
set.size //1

set.add({}).add({})
set.size //3
Read more »