useAtom是 Jotai 库中的一个核心 Hook，用于在 React 组件中管理和使用状态。Jotai 是一个轻量级的状态管理库，灵感来源于 Recoil，但更加简洁和直观。基本用法useAtom用于创建和管理原子状态（atoms）。原子状态是 Jotai 中的基本状态单元，可以被多个组件共享和更新。import { atom, useAtom } from 'jotai'; // 创建一个原子状态 const countAtom = atom(0); function Counter() { // 使用 useAtom 读取和更新原子状态 const [count, setCount] = useAtom(countAtom); return (Count: {count}setCount(count + 1)}>Increment); }特点简洁：Jotai 的 API 非常简洁，易于学习和使用。轻量：Jotai 的体积很小，对项目的影响较小。灵活：原子状态可以组合和派生，支持复杂的状态逻辑。React 集成：与 React 的 Hooks API 完美集成，使用起来非常自然。高级用法除了基本的状态管理，Jotai 还支持派生状态、异步状态和原子组合等高级功能。import { atom, useAtom } from 'j ...继续阅读 (48)

为什么要写 rn一个是我自己还没正儿八经地写过 rn，想试试它的体验怎么样。加上最近对 Follow 这个 RSS 阅读器很感兴趣，但是它暂时还没移动端，可以作为我边学习边实践的对象。再有就是最近开始上班了，自己老是没什么动力在下班后写点想写的代码，有个目标更容易让自己专注。同时也立个 flag，把学习和开发的过程写成每周更新的小博客，欢迎大家关注。准备工作hello world好了，废话不多说，让我们跑起来第一个 app 吧。不过正所谓 “工欲善其事，必先利其器”，我们先准备好环境。一般来说你只需要安装好 Xcode 就行了，不过如果你像我一样，最近升级了 macOS beta 的话，就会麻烦一些：App Store 里的 Xcode 是不能打开的，和系统版本不匹配。下载完的 Xcode beta 没办法直接打开，提示the plug-in or one of its prerequisite plug-ins may be missing or damaged and may need to be reinstalled.，需要手动安装Xcode.app/Contents/Resources/Packages/下的安装包。参见https://forums.developer.apple.com/forums/thread/660860命令行中需要 select 到你在用的 b ...继续阅读 (61)

基本概念Axios（全称 ajax I/O system）不是一种新技术，本质上是对原生 XHR（XMLHttpRequest）的封装，但它是基于 Promise 的实现版本，符合最新的 ES 规范。Axios 提供了简单而直观的 API，使得在前端应用程序中进行 HTTP 通信变得更加容易。Axios 可以与现代前端框架（如 React、Vue.js 和 Angular）以及后端服务器（如 Node.js）配合使用。主要特性从浏览器中创建 XMLHttpRequests。 ...继续阅读 (71)

我的感觉，react开发效率不高。这当然应该是我还不熟悉react的缘故。但是，在阅读react代码过程中，其中一个容易困惑的地方是它到处充斥着的解构赋值。当然了，解构赋值并不是React特有的功能，而是ES6（ECMAScript 2015）引入到JavaScript中的语言特性。但是，这难道不是json对象的定义模式吗，怎么在这里变成了赋值，并且是将左边的东西赋给右边的？只能说这种赋值，忽左忽右，神鬼莫测。简则简矣，可读则未必。据说解构赋值简化了语言，使得代码更具可读性云云。哦，这是解构赋值，相当于。 ...继续阅读 (76)

原理：通过同步更新 useRef  来获取最新值[crayon-6684fdd85134a468228163/]使用：[crayon-6684fdd851350009235394/] The postReact 18 自定义 Hook 获取 useState 最新值appeared first onSKILL.NULL. ...继续阅读 (88)

如果你一直在跟随本指南，你应该理解容器为应用程序的每个组件提供了隔离的进程。每个组件 - 如 React 前端、Python API 和 Postgres 数据库 - 都运行在自己的沙箱环境中，与主机上的其他一切完全隔离。这种隔离对于安全和管理依赖性非常有利，但也意味着你不能直接访问它们。例如，你无法在浏览器中访问 web 应用程序。这就是端口发布的作用。 ...继续阅读 (49)

想象一下，你正在开发一个Web应用程序，它具有三个主要组件：React前端、Python API和PostgreSQL数据库。如果你想进行这个项目，你必须安装Node.jsPython和PostgreSQL。如何确保您与团队中的其他开发人员拥有相同的版本？如何确保您的CI/CD系统使用的是相同的版本？如何确保生产环境中的版本一致？如何确保您的应用程序所需的Python（或Node.js或PostgreSQL）版本不受您机器上已有内容的影响？如何管理潜在的依赖冲突？这时，容器技术应运而生！ ...继续阅读 (60)

在使用应用程序时，对象、页面、模态框和其他组件的流畅移动可以提升我们的用户体验，并鼓励用户回归。没有人愿意使用出现故障且无法正常移动的应用程序。对于前端开发人员来说，创建动画和对象过渡可能是一种负担，因为我们通常希望专注于为我们的应用编写代码，而不是去计算在哪里放置一个对象，或者当用户在我们的应用上触发一个事件时，应该将该对象移动到哪里。与UI设计师合作也可能是一项挑战，尤其是当期望不一致时——例如，当设计师期望看到他们的复杂动画被原样重现。找到一个好的工具和包来解决这个问题也不那么容易——但这正是为什么react-native-reanimated包被构建的原因。react-native-reanimatednpm包让我们能够轻松创建简单和复杂的，但流畅和互动的动画。一开始使用可能并不直观，但是随着我们在这篇文章中练习示例，我们应该能够理解如何使用这个包。在我们继续之前，我假设你已经对React Native及其工作原理有所了解。此外，React Native Reanimated v3只支持React Native v0.64或更高版本，因此请确保你更新或下载最新版本的React Native来配合这个教程。探索 React Native Reanimated v2如果你曾经使用过React Native Reanimated v1，请记住v2引入了一些新的概念和重大变化。现在 ...继续阅读 (120)

前几篇文章，我们尝试把互联网中的一些模型、方法论运用到我们的生活中。这篇文章，我们用React框架来尝试一下自我的情绪管理。说起React框架，我们知道它是一种由Facebook开发和维护的开源JavaScript库，主要用于构建用户界面，特别是单页应用程序（SPA）。React框架围绕组件化，即把用户界面拆分为可复用的独立组件，每个组件负责管理自身的状态和属性，以此来提高代码的可维护性和可复用性。React框架的核心思想是基于“观察，思考，行动”的循环。下面我们来仔细了解下这个循环在React中的具体应用：观察（Observation）：React是通过虚拟DOM来观察应用状态的变化的，虚拟DOM是一个内存中的表示，它代表了真实DOM的状态。React通过比较虚拟DOM的前后状态，就可以快速识别应用状态的变化。思考（Thinking）：一旦React观察到状态变化，它会进行思考，即重新渲染需要更新的部分。React使用一种称为“声明式”的编程模型，开发者只需要声明UI应该是什么样子的，而不需要手动操作DOM。React会根据状态变化自动更新UI，使得开发者可以更专注于UI的声明而不是状态变化时的DOM操作。行动（Action）：当React决定了哪些部分需要更新时，它会采取行动，即更新虚拟DOM并将变化应用到真实DOM中。React使用一种称为“协调器（Reconciliatio ...继续阅读 (41)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/data-management-approach-for-zustand-and-react-query ...继续阅读 (55)

随着互联网普及和发展，Web 应用程序的数量越来越多，各种网络问题也是层出不穷，因而监测这些 Web 应用程序的性能和可用性变得非常重要。今天的文章和大家分享一款十分好用的的网站分析项目！项目简介Web-Check 是一款开源网站分析工具，能帮助我们快速的扫描网站，检测网站或主机的信息，发现网页性能和兼容性问题，包括 IP/SSL/DNS/Cookies 等信息。比如，可帮助检测网页的语法错误、标签关闭、属性错误等等，确保网页的正确性；分析网页性能，提供优化建议，提升加载的速度和用户体验。安装部署1dockerrun -p3000:3000lissy93/web-check注意：项目支持非常多的部署方式，包括 Netlify/Vercel 的一键部署，Docker 部署和本地源码部署。这里仅以 Docker 部署的方式为例，使用上面的命令部署后，可通过 `IP:3000 访问。配置设置API 密钥和凭据：变量说明GOOGLE_CLOUD_API_KEYGoogle API 的密钥，这可用于返回网站质量指标。REACT_APP_SHODAN_API_KEYShodan API 的密钥，这将显示给定域关联主机名。REACT_APP_WHO_API_KEYWhoAPI 的密钥，这将显示比默认作业更全面的 WhoIs 记录。配置设置：变量说明PORT运行 server.js 时提供 API ...继续阅读 (142)

...继续阅读 (67)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/why-react-server-component-2 ...继续阅读 (60)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/why-react-server-component-1 ...继续阅读 (55)

tocReact“动态”表单设计（一）动态表单是什么要解决的问题基础知识概要模块设计UI renderState managementAction Design使用DSL描述表单tocstopReact “动态”表单设计（一）#在本节中，我会介绍动态表单的定义，实现一个这样的表单会遇到的问题，和给出它的基础数据结构和生成函数。在下一节中，我会更详细的介绍，这个表单中字段的值的存储方式。和如何实现这些功能和组件动态表单是什么#在常见B/S架构的项目下，我们有的时候会遇到，需要根据不同用户的权限和需求，为他们提供包含不同字段的表单。例如，一个工单系统，我们假设有三个角色。可以接受工单的人(A和B)，审核工单进度的人(C)。对于A，他可能需要填写工单处理的开始和结束时间，确认什么时候可以处理工单。如果A接受了工单，但发现在约定时间无法处理完成，他可以将该工单分享给B。那么B看到的工单内容，应该是不可以编辑，并且可以选择接受或不接受。当AB完成了这个工单后，C应该收到工单完成审核。C可以看到工单的所有信息，并且选择是否关闭这个工单。对于上述业务逻辑，我们可以看到一个表单的大部分内容被复用了3次（工单号，处理人等字段），而对于A，B，C他们又有一些特别的字段和操作，并且他们这些区别的可以见性控制完全来自于Server端下发的数据。那么对于这种场景我们是否可以使用被复用的字段和每个人的特殊操作 ...继续阅读 (41)

首发于公众号前端混合开发，欢迎关注。作为一个跨平台移动应用开发框架，React Native 需要与平台特定的编程语言（如 Android 的 Java 和 iOS 的 Objective-C）进行通信。这可以通过两种方式之一实现，这取决于你用于构建混合移动应用的架构。在 React Native 的原始或传统架构中，这种通信过程是通过所谓的桥接来实现的。与此同时，较新的、更具实验性的架构使用 JavaScript 接口（JSI）来直接调用在 Java 或 Objective-C 中实现的方法。让我们从高层次来看看每个选项是如何工作的，然后探索使用React Native JSI来提高我们应用的速度和性能。你可以在这个GitHub仓库中查看本文中使用的代码演示。需要注意的是，这是一个相对高级的话题，因此需要一些 React Native 编程经验才能跟上。此外，至少对 Java 和 Objective-C 基础有一定的了解将帮助你从本教程中获得最大收益。React Native的原始架构是如何工作的？在 React Native 的传统架构中，一个应用被划分为三个不同的部分或线程：JavaScript线程：我们在这里编写JavaScript代码和业务逻辑，以及创建节点阴影树：React Native 使用Yoga 框架进行布局计算的地方。平台 UI（Java 或 Objective ...继续阅读 (85)

在使用React Native工作时，你很可能已经使用了AsyncStorage作为存储解决方案。例如，你可以使用AsyncStorage来存储键值对，比如你的应用程序的当前主题，甚至为了各种原因存储状态和令牌。除了AsyncStorage，我们还可以使用一些第三方存储解决方案。在这篇文章中，我们将研究react-native-mmkv库，并探讨为什么你可能想要用它替代AsyncStorage，以及如何在我们的应用程序中使用它。为什么使用 react-native-mmkv ？由微信开发的 react-native-mmkv 库允许我们高效地从 MMKV 存储框架存储和读取键值对。它的名字是 React Nativememory-map key-value存储的简称。类似于 AsyncStorage ，react-native-mmkv也具有跨平台兼容性，意味着它适用于 iOS 和 Android 平台。让我们来看看你可能会考虑使用 MMKV 而不是AsyncStorage的一些原因。加密AsyncStorage是一个未加密的存储系统。不建议使用像AsyncStorage这样的存储解决方案来存储密码、令牌和其他私人信息。MMKV比AsyncStorage更安全，提供数据加密和其他更高级的安全特性。如果你想存储需要高级别安全保护的敏感数据，MMKV是更好的选择。完全同步存储Async ...继续阅读 (83)

在数字化办公日益普及的今天，线上白板应用层出不穷。但你是否厌倦了那些千篇一律、冰冷的电子界面？想不想体验一把亲切、自由的手绘风格？今天，我们就来探讨一款引领潮流的开源项目——Excalidraw，它以独特的手绘风格，试图颠覆你对传统白板的认知！🌃 Excalidraw的魅力无限画布：Excalidraw提供了无边界的创作空间，让你的想法可以自由飞翔。手绘效果：模拟手绘线条，为你的作品增添一丝自然与个性。深色模式：贴心的深色界面，减轻眼睛疲劳，夜间创作更舒适。定制化：可以根据个人喜好调整设置，打造专属的创作环境。图像支持：轻松导入图片，与手绘元素完美融合。多语言：支持多种语言，跨越语言障碍，全球用户共享。导出多样：PNG、SVG或JSON格式，满足不同用途的需求。🌐 协作与安全PWA支持：离线也能使用，随时随地捕捉灵感。实时协作：多人同时编辑，团队合作无间。加密保护：数据安全，加密传输，确保隐私无忧。本地存储：自动保存到浏览器，不怕丢失工作进度。分享链接：生成只读链接，轻松分享你的作品。🛠️ 开发者友好npm包安装：通过npm或yarn，轻松集成到你的应用中。npm install react react-dom @excalidraw/excalidraw 或者 yarn add react react-dom @excalidraw/excalidrawAPI与插件：提供AP ...继续阅读 (89)

前言EverShop is a GraphQL Based and React ecommerce platform with essential commerce features. Built with React, modular and fully customizable.本实例是基于EverShop部署的商城系统，支持桌面端和移动端自适应。实例地址https://evershop.dujun.eu.org实例配置配置描述系统Debian服务端Node.js 20数据库PostgreSQL 13程序EverShop实例部署权限要求具有系统读写权限已安装 Node.js已安装 PostgreSQL安装程序官网地址：https://evershop.io仓库地址：https://github.com/evershopcommerce/evershopnpx create-evershop-app my-app cd my-app npm run build npm run start实例体验进入实例深度体验后记本实例仅供参考，不定期重置数据。体验更多开源实例 ...继续阅读 (60)

当应用的状态发生变化时，React会创建一个新的虚拟DOM树，并与之前的虚拟DOM树进行比较，找出发生变化的部分，然后只更新这些部分的真实DOM，从而避免了不必要的DOM操作，提高了性能。多页应用（Multi-page applications）：React 也可以用于构建多页应用，其中每个页面都有自己的 React 组件，通过组件的嵌套和交互来构建复杂的页面。除了核心的React库，还有一些用于与React集成的附加库，例如React Router用于处理应用的路由，Redux用于管理应用的状态等。 ...继续阅读 (95)

前端真的很好学，一个新的框架，最长、最长花一周时间就能学会，还是说得像 React 或 Vue 这种颠覆性的框架的，其他的看看文档，少的 5 分钟就回了，长的 1 天，真的没啥难的。 ...继续阅读 (52)

字体是优秀用户体验的基石。使用定制字体可以为你的应用程序提供独特的身份，帮助你的项目在竞争激烈的市场中脱颖而出。在这篇指南中，我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法。要跟上进度，你应该熟悉 React Native 或 Expo SDK 的基础知识，包括 JSX、组件（类和函数式）和样式。向 React Native CLI 项目添加自定义字体对于我们的项目，我们将研究如何通过构建使用Google字体的基础应用程序，将自定义字体添加到React Native CLI项目中。Google字体是一个免费的开源字体库，可在设计网页和移动应用程序时使用。要启动React Native CLI项目，请在终端中运行以下命令：npx react-native@latest init CustomFontCLICustomFontCLI 是我们的项目文件夹的名称。一旦项目成功安装，你将会看到下面的图片：在你喜欢的IDE中打开你的项目以开始。在这个教程中，我们将使用VS Code。一旦项目已经启动，我们将继续获取我们想要使用的字体。我们将讨论如何导入它们并在我们的项目中使用它们。下载并将Google字体集成到我们的项目中在这个项目中，我们将使用两种字体：QuickSand和Raleway，演示自定义字体的集成，你可以在Google字体上找到 ...继续阅读 (85)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | rss 订阅 1. OpenAi 推出 Ai 视频模型 Sora https://openai.com/sora Sora 是一个人工智能模型，可以根据文本指令创建逼真而富有想象力的场景。其主要目标是教会 AI 理解并模拟现实世界的运动，进而帮助人们解决需要真实世界互动的问题。Sora 可以根据用户的提示，生成长达一分钟的视频，同时保持视觉质量和对用户提示的遵守。 2. 图解 react 源码 https://github.com/7kms/react-illustration-series react 源码，基于 react@17.0.2 (尽可能跟随 react 版本的升级，持续更新). 用大量配图的方式，致力于将 react 原理表述清楚。 3. 使用 cloudflare 免费服务，搭建临时邮箱 Github 源码：https://github.com/dreamhunter2333/cloudflare_temp_email 在线演示：https://temp-email.dreamhunter2333.xyz/ 4. 一个基于 Cloudflare 的临时邮箱工具 (未开源) https://email-once.com/ 基于 Cloudflare worker/pages/D1/R2 实现 风格 ...继续阅读 (56)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | rss 订阅 1. OpenAi 推出 Ai 视频模型 Sora https://openai.com/sora Sora 是一个人工智能模型，可以根据文本指令创建逼真而富有想象力的场景。其主要目标是教会 AI 理解并模拟现实世界的运动，进而帮助人们解决需要真实世界互动的问题。Sora 可以根据用户的提示，生成长达一分钟的视频，同时保持视觉质量和对用户提示的遵守。 2. 图解 react 源码 https://github.com/7kms/react-illustration-series react 源码，基于 react@17.0.2 (尽可能跟随 react 版本的升级，持续更新). 用大量配图的方式，致力于将 react 原理表述清楚。 3. 使用 cloudflare 免费服务，搭建临时邮箱 Github 源码：https://github.com/dreamhunter2333/cloudflare_temp_email 在线演示：https://temp-email.dreamhunter2333.xyz/ 4. 一个基于 Cloudflare 的临时邮箱工具 (未开源) https://email-once.com/ 基于 Cloudflare worker/pages/D1/R2 实现 风格 ...继续阅读 (61)

在React Native社区中，原生动态导入一直是期待已久的功能。在React Native 0.72 版本发布之前，只能通过第三方库和其他变通方法实现动态导入，例如使用React.lazy()和Suspense函数。现在，动态导入已经成为React Native框架的原生部分。在这篇文章中，我们将比较静态和动态导入，学习如何原生地处理动态导入，以及有效实施的最佳实践。静态导入 vs. 动态导入在深入研究实现细节之前，理解什么是动态导入以及它们与静态导入有何不同是至关重要的，静态导入是在JavaScript中包含模块的更常见方式。静态导入是你在文件顶部使用import或require语法声明的导入。这是因为在应用程序启动时，它们可能需要在你的整个应用程序中可用。这是一个例子：import React from 'react'; import {View, Text} from 'react-native'; const MyComponent = require('./MyComponent');静态导入是同步的，意味着它们会阻塞主线程，直到模块完全加载。这种行为可能导致应用程序启动时间变慢，特别是在较大的应用程序中。然而，当一个库或模块在代码库的多个时间或多个地方需要时，静态导入就会显得非常有用。相比之下，动态导入赋予开发者在需要时即时导入模块的能力，引领了一个异步范式。这意味 ...继续阅读 (86)

大家好，我卡颂。React当前的稳定版本是18.2，发布时间是22年6月，在此之后就没有新的稳定版本发布。直到今年2月15日，官方博客才透露下一个稳定版本的计划。没错，他就是React19。为什么时隔1年多才公布下个稳定版本的计划？为什么下个版本直接跳到了19？18我都还没升呢，19就来了，是不是要学很多东西？这篇文章会为你详细解答这些疑问。免费领取卡颂原创React教程（原价359）、加入人类高质量前端群从React16聊起近年来React最为人津津乐道的版本应该是16.8，这个版本引入了Hooks，为React（乃至整个前端框架领域）注入了新的活力。再之后的v17没有新特性引入。既然没有新特性引入，为什么要发布一个大版本（从16到17）呢？这是因为从同步更新升级到并发更新的React，中间存在breaking change。这么大体量的框架，在升级时需要保证过程尽可能平顺。这除了是一种专业、负责的体现，更重要的，版本割裂会造成大量用户损失（参考当年ng1升级到anuglar2时）。当升级到18后，React团队发现 —— 真正升级到18，并大量使用并发特性（比如useTransition）的开发者并不多。更常见的场景是 —— 知名开源库集成并发特性，开发者再直接用这些库。所以，React团队转变策略，将迭代重心从赋能开发者转变为赋能开源库。那么，什么样的库受众最多呢？显然是框架 ...继续阅读 (68)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/dev-story/nextjs-react-load-and-render-remote-component前言写过文档的大佬们都知道MDX这个东西，对原本的 Markdown 进行了扩展，可以在 Markdown 中直接使用框架组件（React，Vue 等等）。现在也有很多静态生成的博客使用 MDX 去编写博文，在博文中内嵌了 React 组件，在一些需要交互式的场景中，在传统的 Markdown 只能展示内容，而使用了组件就可以把死的文字变活。MDX 的原理是在项目构建时，解析 Markdown 抽象语法树，把引入的组件进行了编译，然后嵌入到了文章内部。而使用 MDX，就必须要引入编译时。而对于 CMS 类型的博客网站，因为内容都是动态生成的，就无法使用 MDX。那么有没有办法去想一个歪路子去实现呢。构想有了初步的想法之后，我们的需求就很明确了。需要在普通的 Markdown 中渲染远程组件。这里我们都以 React 为例，项目框架为 NextJS。首先我们构想一个 RemoteComponentRender，需要的逻辑如下。这个内容只能在原文中查看哦首先要加载远程组件，然后提取其中的组件扔到 React 里面去渲染。然后为了更简单的实现一个 Markdown ...继续阅读 (83)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/programming/nextjs-react-load-and-render-remote-component前言写过文档的大佬们都知道MDX这个东西，对原本的 Markdown 进行了扩展，可以在 Markdown 中直接使用框架组件（React，Vue 等等）。现在也有很多静态生成的博客使用 MDX 去编写博文，在博文中内嵌了 React 组件，在一些需要交互式的场景中，在传统的 Markdown 只能展示内容，而使用了组件就可以把死的文字变活。MDX 的原理是在项目构建时，解析 Markdown 抽象语法树，把引入的组件进行了编译，然后嵌入到了文章内部。而使用 MDX，就必须要引入编译时。而对于 CMS 类型的博客网站，因为内容都是动态生成的，就无法使用 MDX。那么有没有办法去想一个歪路子去实现呢。构想有了初步的想法之后，我们的需求就很明确了。需要在普通的 Markdown 中渲染远程组件。这里我们都以 React 为例，项目框架为 NextJS。首先我们构想一个 RemoteComponentRender，需要的逻辑如下。这个内容只能在原文中查看哦首先要加载远程组件，然后提取其中的组件扔到 React 里面去渲染。然后为了更简单的实现一个 Markdow ...继续阅读 (78)

> 原文传送门 Types of automated testing 在各种代码库中，对不同类型的测试进行命名通常遵循一定的共性，尽管这些命名并没有严格的定义标准。本课程尝试对每种测试类型给出了一些建议和解释，但你可能在其他地方看到有所不同的定义。 之前的内容中提到了单元测试和组件测试（以我们讨论的 React 组件为例）。这两种测试类型在我们的测试金字塔（或其他形状的模型）中处于较低位置，... ...继续阅读 (101)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/programming/react-native-webView-editor-issue本篇文章主要解决两个问题：WebView 编辑器 Toolbar 的吸附键盘WebView 编辑器焦点元素被虚拟键盘遮挡这个内容只能在原文中查看哦背景最近在写 React Native，需要实现一个文本编辑器。而现在成熟的文本编辑器都是 Web 的，在原生或者是 React Native 这类跨端的框架成熟的富文本编辑器都是比较少见的。所以我们使用 Web + React Native WebView 去实现这个组件。在需求中，我们主要实现这样的布局。上面是整个编辑器，底下是 AccessoryView + Keyboard。思考过程AccessoryViewAccessoryView 在 React Native 提供了相应的组件。组件叫InputAccessoryView但是有个局限是这个组件只适用于 React Native 的 TextInput。在 WebView 中无法使用。使用 Web 实现在 Web 中，可以使用VisualViewport去监听虚拟键盘是否被唤出，并且获取到虚拟键盘的宽高。然后去定位工具栏的位置。弊端：不是实时的状态。无法立即获取到键盘的高度。u ...继续阅读 (130)