前言

2023年初的计划都实现了吗？呵呵，不管怎么样，迄今为止我博客坚持时间也马上10年了，2014年，我创建了本博客，如今马上2024年了，本博客也马上10年了，10年见证了互联网的兴起，鼎盛。其实坚持做一件事不容易，希望大家多多支持。本文主要总结一下React 的几种 Ref 的使用，之前也有文章介绍过react父组件调用子组件的方法小结,其实这里介绍了一些ref的用法，但是不是很全面，本文再次总结一下，作为2023的尾声！

ref的三种调用方式

一. String Refs

前言

文字的宽高，不同字体渲染不一样，如何获取字体字号单个文字的实际占用的宽度呢？今天介绍两种方式。

方案一，dom宽度获取

用真实的dom做渲染，然后获取dom的宽度，计算得到最终的准确的字符像素长度。

span方法如下：

前言

H5中利用cancas实现一个画板功能很简单，甚至你可以直接用chatGpt生成，生成之后简单的效果运行demo是可以的，然后在此基础上可以自己修改一下，集成功能，就可以了。

例如如下是html5的简单的画板demo

前言

本文主要介绍一下reactnative布局相关知识，列举一下web端布局和rn布局的一些区别。在React Native中布局采用的是FleBox(弹性框)进行布局。

FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，并不是所有的浏览器都支持Flexbox。但大家在做React Native开发时大可不必担心FlexBox的兼容性问题，因为既然React Native选择用FlexBox布局，那么React Native对FlexBox的支持自然会做的很好。

宽和高

在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小。
在web端，我们讲究的是流式布局，有块级元素和行内元素的概念，但是在rn中没有这个概念，一个元素不指定宽高，那么就展示不出来。

像素无关

在React Native中尺寸是没有单位的，它代表了设备独立像素。