note
note copied to clipboard
yaofly2012
Personal blog
# 布局 React Native有两种布局方式： 1. 控制子元素展示的布局：`flex`布局方式； 3. 控制自身相对应父元素展示的布局：`relative`/`absolute`布局方式。 # [`relative`/`absolute`布局](https://reactnative.dev/docs/0.71/flexbox#absolute--relative-layout) 相对于WEB CSS的`position`属性，React Native里`position`属性只有像个值： 1. `relative`默认值 2. `absolute` 并且含义跟WEB CSS的`position`属性一样的。**由于其默认值是`relative`，这导致`absolute`元素永远相对于其父元素位置**。 # [`Flex`布局](https://reactnative.dev/docs/0.71/flexbox#flex) 子元素的布局有且只有一种布局方式，即`flex`布局。所以WEB CSS不一样的是父组件不用指定是否开启`flex`布局。 ## 父组件相关属性 ### [`flexDirection`](https://reactnative.dev/docs/0.71/layout-props#flexdirection) ### [`justifyContent`](https://reactnative.dev/docs/0.71/layout-props#justifycontent) ###...
安装Python后端警告： ```js ==> Caveats Python has been installed as /opt/homebrew/bin/python3.10 Unversioned and major-versioned symlinks `python`, `python3`, `python-config`, `python3-config`, `pip`, `pip3`, etc. pointing to `python3.10`, `python3.10-config`, `pip3.10` etc., respectively, have been...
# 背景 期望在用户点击`a`标签或者用户提交表单（利用`Form`）时展示一个loading。但是发现在页面跳转或者提交Form过程中SVG动画不执行了！！！ # 解决方案 利用`iframe`加载SVG。但是效果并不好，毕竟等在线的SVG加载完毕后，原本的页面跳转或者表单提交已经完成了。 # 参考： 1. [思否：在页面还未加载完毕前，svg的动画效果失效？](https://segmentfault.com/q/1010000012802166) 2. [Animated SVG stops after page reloading](https://discourse.webflow.com/t/animated-svg-stops-after-page-reloading/141526) 3. [Safari pauses all animation on redirect / form submission](https://stackoverflow.com/questions/28749519/safari-pauses-all-animation-on-redirect-form-submission)
跨域总结
# 一、何为跨域 源（Origin）：协议+主域+端口； 同源（Same Origin）：协议，域名，端口三者都相同视为同源； 跨域：是指资源的源和文档的源不同。 # 二、受跨域影响资源 ## 2.1 不受同源策略限制的 1. 跨域资源写入： - `` - `` - `` - `` - `` 2. `Form`表单提交。 ## 2.2 [受同源策略限制范围](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) 1. 跨域脚本API访问（不同源的DOM操作）；...
# 关键词： 1. 更新队列 2. 更新函数 3. 懒计算 4. 立即计算 5. 跳过更新。 # 开始 先看个问题，下面组件中如果点击3次“setCounter”按钮，控制台输出是什么？ ```js function Display({ counter }) { console.log('Display.render', counter); return {counter} } function Counter() { const...
富文本组件-
# 汇总 ## 1. [Draft.js](https://draftjs.org/)  >Rich Text Editor Framework for React 二级市场： 1. [braft-editor](https://github.com/margox/braft-editor) ## 2. [quilljs](https://quilljs.com/)  >Your powerful rich text editor. 二级市场： 1. [react-quill](https://www.npmjs.com/package/react-quill) 2....
# 傻傻分弄不清 1. `clientHeight/clientWidth/clientTop/clientLeft` 2. `offsetHeight/offsetWidth/offsetTop/offsetLeft` 3. `scrollHeight/scrollWidth/scrollTop/scrollLeft` # 一、基本概念 ## 1.1 xxxHeight/Width xxxHeight/Width表述元素的尺寸。 |属性|描述| |--|--| |`offsetHeight/offsetWidth`| | |`clientHeight/clientWidth`| | |`scrollHeight/scrollWidth`|| ### 1. [`clientHeight/clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth) 表示的是元素展示内容的**可视区矩形**尺寸 子元素的在父元素的padding区域也是可见的，所以`clientHeight/Width`的尺寸包含padding区域，但不包含**border,margin,滚动条区域**。 - clientHeight = padding-top...
# 一、背景 最近要实现一个效果（如[Demo](https://www.jq22.com/demo/jquerybootstrapdymoban202104010154/index.html)）： 1. 用户点击页面菜单时，则页面**平滑的**滚动指定的内容； 2. 用户页面滚动时，则对应的页面菜单页切换。 # 二、实现方案 ## 2.1 [原始方式](https://juejin.cn/post/6844903840047710221) 1. feature1: [`scrollIntoView({ behavior: 'smooth' })`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView) 2. feature2: 监听滚动事件，计算锚点`offset`，进而计算切换哪个菜单 ### 需要考虑的事情： 用户点击菜单也会触发页面滚动，会导致实现`feature2`的功能中滚动事件处理函数执行（此时最好屏蔽）。 ### 兼容性： 1. Edge 44 平滑滚动不支持...
# 链接汇总 |链接|已安装APP行为|未安装APP行为 |--|--|--| |DeepLink|直接唤醒APP跳到指定页面 | 无反应| |Universal Link (iOS) AppLinks (Android) | 唤醒APP跳到指定页面 | 浏览器(默认/第三方)内打开指定页面（即指定页面的Web形式）| |Deferred Deep Link 1. Onelink (by Appsflyer) 2. [GoLink](https://www.golinkcn.com/) |直接唤醒APP跳到指定页面|1. 跳到应用商店下载; 2. 安装启动app后，跳转到指定页面。| #...