本文主要介绍一下reactnative布局相关知识，列举一下web端布局和rn布局的一些区别。在React Native中布局采用的是FleBox(弹性框)进行布局。
FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，并不是所有的浏览器都支持Flexbox。但大家在做React Native开发时大可不必担心FlexBox的兼容性问题，因为既然React Native选择用FlexBox布局，那么React Native对FlexBox的支持自然会做的很好。
在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小。
在web端，我们讲究的是流式布局，有块级元素和行内元素的概念，但是在rn中没有这个概念，一个元素不指定宽高，那么就展示不出来。
在React Native中尺寸是没有单位的，它代表了设备独立像素。
今天主要介绍一下web端颜色拾色器吸管工具的使用。ued需要在页面中用吸管吸取页面中的颜色，类似ps等工具里面的吸管工具，这个在web端网页中如何实现呢？
假如需要吸取桌面上面的任何颜色，最好使用原生api的方式，下面主要介绍两种原生方式的实现。
简单代码实现如下
前段时间，项目中用到html5音频采集，主要是和微信录音一样，流程是按住说话，右侧滑动可以音频转文字，左侧滑动撤销。关于按住说话及左右侧滑动交互，相对简单，主要是运用了onTouchStart，onTouchMove，onTouchEnd三个事件完成。我之前文章也有过模仿微信语音播放效果动画，其中左右侧滑动位置主要是根据 e.targetTouches[0].pageX，和 e.targetTouches[0].pageY来完成的。本文着重讲解一下html5音频采集解决方案。
之所以叫解决方案，因为这里有涉及了音频采集的各种问题，例如音波，格式转换，录制格式，多段音频拼接，多个语音合成等等。语音采集我主要用了。
音频采集可以利用navigator.mediaDevices.getUserMedia({ audio: true })，来自己手动采集。 判断有无权限及开启权限可以如下代码
之前在 LESS、SASS 等预处理器中嵌套写法，现在原生css竟然支持了哈，从chrome112开始支持！下面尝鲜看看语法！
div {
& > p {
color: red;
}
&:hover {
color: yellow;
}
}其语法规则大致如下：
今天将解决 transform导致文字 的模糊问题。 那么？什么时候会触发这种问题呢？在 Google 上，其实我们能搜到非常多类似的案例，总结而言：
一、当文本元素的某个祖先容器存在 transform: translate() 或者 transform: scale() 等 transform 操作时，容易出现这种问题
当然，这只是必要条件，不是充分条件。继续深入探究，会发现，必须还得同时满足一些其它条件：
二、元素作用了 transform: translate() 或者 transform: scale() 后的计算值产生了非整数
例如：
.container {
position: absolute;
width: 1104px;
height: 475px;
top: 50%;
transform: translateY(-50%);
// ...
}由于元素的高度为 475px，translateY(-50%) 等于 237.5px，非整数，才导致了内部的字体模糊。
但是，需要注意的是，并非所有产生的非整数都会导致了内部的字体模糊。
三、文本内容是否模糊还与屏幕有关，高清屏（dpr > 2）下不容易触发，更多发生在普通屏幕下（dpr = 1）