React Navigation 在 Web 端
React Native 使跨平台开发比以前容易得多，借助 React Native for Web，你也可以在 Android、iOS 和 Web 端复用代码！
对于 Web 应用程序而言，复用代码的一个主要痛点一直是导航。React Navigation 是 React Native 最广泛使用的导航库之一，但它之前不支持 Web 端。虽然你可以在 Web 端使用 React Navigation 运行应用程序，但仍然缺少很多功能，例如与浏览器 URL 的正确集成。
我们最终为 React Navigation 添加了初步的 Web 端支持。让我们来看看这些变化。
与浏览器 URL 集成
Web 端支持的第一步是实现正确的 URL 集成。这意味着：
- 用户应该能够使用 URL 导航到应用程序中的某个屏幕
- 当用户在应用程序中导航时，浏览器地址栏中的 URL 应该更新
- 用户应该能够使用浏览器的后退/前进按钮进行后退和前进操作
- 导航到应用程序中其他屏幕的按钮应该是链接，用户应该能够使用标准的快捷方式来操作它们
在原生应用程序中，已经可以通过深层链接使用 URL 导航到应用程序中的某个屏幕。如果你在 NavigationContainer 的 linking 属性中提供配置，React Navigation 可以处理深层链接。现在，我们在浏览器中为 URL 集成重用了相同的配置。它也适用于在用户在应用程序中导航时更新浏览器中的 URL。因此，如果你已经在应用程序中配置了深层链接，它将在 Web 端的 URL 集成中开箱即用 🥳
默认情况下，如果你提供了 linking={{ enabled: true }} 而没有任何额外的配置，我们将重用路由名称作为路径。但是，你也可以通过在 config 属性下提供映射来定制路径和参数的解析方式。
示例
const linking = {
prefixes: ['https://mychat.com', 'mychat://'],
config: {
screens: {
Home: '',
Profile: ':id/profile',
Settings: ':id/blog',
},
},
};
function App() {
return (
<NavigationContainer linking={linking} fallback={<SplashScreen />}>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
}
我们提供了一个 playground，你可以在其中尝试自定义配置并查看其解析方式。试用一下，我们希望它能让你更轻松地在你的应用程序中配置链接。
我们新增了一个 <Link /> 组件，让你可以在应用程序中使用 URL 进行导航。
示例
<Link to="/profile/jane">Go to Jane's profile</Link>
当你使用此组件时，它会在 Web 端渲染 anchor 标签。这意味着用户可以使用他们在 Web 端习惯的相同模式，例如“在新标签页中打开”、“复制链接地址”等。
特别感谢 Michał 和 Wojciech 在 URL 集成方面所做的广泛工作。
导航器的改进
仅仅 URL 集成不足以实现正确的 Web 端支持。导航器也需要在 Web 端感觉像家一样。我们对内置导航器进行了一些改进，使其在 Web 端的行为符合你的预期。
标签页和抽屉中的 anchor 标签
第一个变化是使用 anchor 标签。当你使用内置导航器（如抽屉导航器和标签页导航器）时，如果你配置了链接，它们会分别为抽屉和标签页项目渲染 anchor 标签。这意味着它们的行为与 Web 端上的普通链接相同。
没有手势和动画
另一个变化是移除了 Web 端的手势。手势在 Web 端不常用，因为它们与许多浏览器功能和系统手势冲突。例如，在 Safari 中，你可以滑动以返回上一页。Android 也有一个系统手势来返回上一页。因此，我们移除了 Web 端的手势。
我们还默认禁用了 Web 端的动画，因为它们不常用，并且可能会显得突兀，尤其是在较大的屏幕上。React Native Web 中的动画也完全在 JS 中运行，并且在 Web 端往往性能不佳。因此，我们决定默认禁用它们，以获得更好的整体体验。
滚动时隐藏地址栏
手机屏幕较小，因此最大化利用可用屏幕尺寸非常重要。移动浏览器实现这一目标的方式之一是在滚动时隐藏和显示地址栏，以便为内容提供更多的垂直空间。
对于 堆栈导航器 来说，这一点尤为重要，因为我们不仅有浏览器的地址栏，还有顶部的 header 也在占用垂直空间。现在，我们将自动调整堆栈导航器的样式以获得这种行为，而无需你编写任何特殊的代码。
永久抽屉
另一种最大化利用可用屏幕尺寸的方法是使我们的 UI 适应不同的屏幕尺寸。例如，我们可能希望在大屏幕上显示侧边栏进行导航，而在较小的屏幕上切换到抽屉。你现在可以将 drawerType 指定为 permanent 以显示始终可见的侧边栏。请参阅 drawerType 的文档，了解如何实现它的示例代码。
特别感谢 Noemi 实现了此功能。
下一步是什么？
这仅仅是一个开始。我们仍然需要弄清楚很多事情，例如 SSR、404 处理等。还有很多工作要做，但我们很高兴宣布它，并期待获得反馈和错误报告。