问题标签 [react-navigation-bottom-tab]

我正在寻找一种方法来为堆栈中的每个屏幕设置自定义标题选项（样式、图标、启用/禁用后退按钮、标题的左右选项），同时为我的应用程序保持多堆栈架构做出反应本国的？这就是我的 App.js 现在的样子，如果需要，我愿意更改它。

我正在开发一个电子书/有声书应用程序。我目前在 BottomTabNavigator 中有三个屏幕，该导航器嵌套在堆栈导航器中，因此我可以显示标题：

我创建了一个自定义标题，但它不会像 go tab-to-tab 那样改变。有没有办法解决这个问题？

在我的反应原生应用程序中，我将反应导航 3 升级为反应导航 5。但是在升级后，当我运行应用程序时，每当我进行任何类型的导航时，我总是会多次收到此警告：

例如，我使用this.props.navigation.push以下代码中的命令在 StackNavigator 的屏幕之间导航：

如果我单击每个标题图标，我会收到此警告。这些导航命令在升级之前都可以使用。升级后它们仍然可以工作，但会发出此警告。我通过互联网搜索，发现此警告发生的唯一地方：

react-navigation/navigation-ex/packages/compat/src/createCompatNavigationProp.tsx

这是一个兼容层，用于处理 React Navigation 4 和 5 之间的各种 API 差异。我使用该库是因为我需要一些子组件中的导航道具。但我不明白他们为什么把警告放在那里！也许我收到警告是因为我没有使用打字稿！如果是这种情况，我可以安全地忽略此警告吗？谢谢你的帮助。

我想在底部选项卡中更新或显示徽章计数，如何将计数从组件中的 API 传递到 Tab.Navigator 并在底部选项卡中显示计数。

示例代码

你的环境

I am trying to use custom icons with a react tabbar navigation. However, all the tutorials and docs always just cover implementing icons by Ionicons or Materialdesign. Is there a way I can implement my own Icons?

This is how the code looks like atm:

前几天我的应用程序运行得非常好，我没有改变任何东西，但是一旦我尝试在 android 上运行它，它就会显示：

当我尝试从 to 导航时 'review'，'settings'出现此错误：

带有有效负载 {"name":"settings"} 的操作 'NAVIGATE' 未由任何导航器处理。

你有一个名为“设置”的屏幕吗？

如果您尝试导航到嵌套导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。

这是一个仅限开发的警告，不会在生产中显示。

我在这个版本中使用反应导航：“@react-navigation/bottom-tabs”：“^5.3.3”，“@react-navigation/native”：“^5.2.3”，“@react-navigation/堆栈": "^5.2.18",

我正在为我的 React Native 项目使用React Navigation 5 。我有一个嵌套在tab navigator中的抽屉导航器。

它看起来像这样：

DrawerStack只是一个带有一堆屏幕的抽屉导航器。

我的问题是，用 Screen2 或 Screen3 上的按钮打开抽屉的最简单方法是什么？

Snapchat 的 UI 目前设置有一个浮动的 SearchBar 标题，该标题似乎在几个屏幕/标签之间共享。我想使用 react-navigation 复制共享的 SearchBar 标头。我目前有一个半工作的解决方案......

目前，即使我在 StackNavigator 上设置了 headerTitle，但在导航到搜索结果屏幕时，标题似乎正在呈现一个全新的 SearchBar（您可以看到表示其呈现的轻微闪烁）。

这是我目前在我的 TabNavigator 中的一个堆栈的设置。

下面是我的 TabNavigator。

导航到搜索结果组件的逻辑位于输入的 onFocus 侦听器中。这是代码...

我将如何配置我的导航元素，以便我有一个可以安装一次的单一 SearchBar 元素？您可以在我上传的 gif 中看到搜索栏也失去了对导航的关注，这也是由于我的搜索组件的第二次渲染/安装。我们欢迎所有的建议！

我正在尝试获取一个简单的选项卡导航示例以在本机反应中工作。似乎在线示例都假设选项卡导航屏幕是您的应用程序中唯一的屏幕，但对我而言并非如此。在我的应用程序中，我将有一个登录页面，成功登录后会有一个标签导航屏幕，我称之为 DashboardTabScreen。该应用程序将提供其他（非选项卡）屏幕（例如设置或联系我们，或其他），并且每个选项卡屏幕都将成为其他“详细”屏幕堆栈的根。

所以这是我的 App.js：

这是我的 DashboardTabScreen.js

当我运行该应用程序时，它会按预期进入登录屏幕。成功登录后，它应该转到此仪表板选项卡屏幕。相反，它会引发错误：

这是我的 package.json：

那么我的代码有什么问题？