在 Web 上配置 React Navigation：根据平台隐藏底部标签栏

Question

寻找有关为 Web 调整 React Navigation 的最佳实践的一般建议。例如，我想将底部选项卡（本机）移动到顶部（在网络上）？这样做的好方法是什么？有没有办法hide/show/change基于平台的导航？

Answer 1

您至少可以通过两种不同的方式完成此操作，但我认为更好的方式是使用媒体查询。

媒体查询

一种方法是使用 Media Queries，您基本上可以在其中检查 screen 尺寸。

您可以有条件地呈现当前屏幕尺寸在特定范围内，或小于或大于特定尺寸。

这是一个Guide to Media Queries from CSS Tricks

I'll abbreviate with xs, sm,md,lg,xl for certain sizes (extra-small, small, medium, large, extra-large).

在你的场景中

所以基本上，您可以渲染选项卡（或任何 UI 元素，真的）或隐藏它们，或有条件地应用 css。

用户代理

另一种方法是使用 User Agent.

您可以检查特定于平台的字符串，例如 Android、iPhone、iPad、Macintosh 等

const { userAgent } = window.navigator

console.log(userAgent)

Answer 2

事实证明比我想象的要容易。谢谢@Drew Reese

如果以下是您的根导航器，例如 -:

function RootNavigator() {

  return (
    <Stack.Navigator>
        <Stack.Screen name="authNav" component={AuthNavigator} />
        <Stack.Screen name="main" component={MainNavigator} />
    </Stack.Navigator>
  );
}

例如，如果您希望您的 Web 应用程序将主导航器加载为侧边栏，并让您的本地人将主导航器加载为底部导航器，请在 MainNavigator.native.js 和 MainNavigator.js.

中的侧边栏（drawerType 设置为永久的抽屉导航器）

即使导入也保持不变。高效！

import MainNavigator from './MainNavigator'

在 Web 上配置 React Navigation：根据平台隐藏底部标签栏

Configuring React Navigation on web: hiding bottom tab bar based on platform

javascript

reactjs

react-native

react-navigation

媒体查询

用户代理