是否可以在实现浏览器行为时使用react-native-render-html导航到页内URL片段子资源？

问题描述

是否可以在实现浏览器行为时使用react-native-render-html导航到页内URL片段子资源？这是一个例子。给定html属性的以下代码段：

<h1 id="title">The Title</h1>
<div style="width:50px;height:200px;">
...
</div>
<a href="#title">Scroll to The Title</a>

当用户按下“滚动到标题”锚点时，我想包含ScrollView滚动到“标题”标题。 Linking.openURL无法正常工作，您可以建议我这种方式吗？

解决方法

Linking.openURL永远不会为您滚动ScrollView。它只会执行原本打算的操作：向系统（Android，iOS）发送一条消息，要求“请在您认为最佳的应用程序中打开此URL”（通常是网络浏览器）。

使用scrollTo命令式方法滚动ScrollView是您想要的。为此，您需要锚标记目标的坐标。不幸的是，在react-native-render-html实现者​​方面，无法同步检索坐标。与DOM元素getBoundingClientRect类似，拥有一种立即读取组件坐标的方法真是太好了。因此，我们将onLinkPress附加到一个对象，该对象描述位于同一页面中的目标坐标。

对于该库的版本6，我正在考虑创建一个包含所有id的动态映射，以及每个对应的onLayout处理程序的结果。当onLinkPress调用中的href是页内片段时，我们会将布局对象从onLayout添加到onLinkPress参数。

,

实现此功能非常特定于底层 HTML 结构，因此没有绝对通用的答案。这就是该库不提供此功能的原因。但是，对于 V6，there is a good step by step guide in this tutorial I wrote。

我将总结以下重要步骤：

1. 多亏了 custom renderers，我们可以使用 onLayout prop 将每个目标的坐标与其 id 映射到缓存对象（上述教程中的 Scroller）中。请注意，这些坐标是相对于父级 View 的。
2. 在同一个缓存对象中，我们存储对底层 ScrollView 的引用。
3. 我们在缓存对象中定义了一个 scrollToId 方法，它调用底层的 ScrollView ref scrollTo method 滚动到我们之前映射到目标的坐标。
4. 我们将 renderersProps.a.onPress 道具设置为回调，该回调将调用缓存对象的 scrollToId 方法。

请注意，您需要通过 a context 或 renderersProps 将缓存对象传递给自定义渲染器（然后您可以使用 useRendererProp 使用该道具）。

这些步骤是从上述教程中自由改编而来的，我邀请您深入了解所有实现细节。需要对 React 钩子、上下文和引用有很好的了解。