使所有标签栏按钮在特定屏幕上不集中

Question

我有一个使用 React 导航的 React 本机应用程序（V6.x 当然）。我的应用程序有一个主导航器，它是一个 bottom-tabs 导航器，包含三个屏幕（选项卡）。这些屏幕中的每一个本身都是堆栈导航器。假设我的其中一个选项卡名为 Wallet（其他选项卡为 Settings 和 Transactions）。在这个钱包屏幕（这是一个堆栈导航器）中，我有一个 HomePage 屏幕、一个 Receive 屏幕和一个 Send 屏幕。我想实现以下行为（如下面的设计截图）：

每当用户转到 Send 或 Receive 屏幕之一时，我希望所有选项卡栏按钮都变得没有焦点（尽管选项卡栏仍然可见）。每当用户返回 HomePage 屏幕（或通过按相应的选项卡按钮转到 Settings 或 Transactions 选项卡时），我希望相关的选项卡按钮再次获得焦点。我怎样才能通过反应导航本身实现这一目标？
（我的项目是用redux管理的，但我更喜欢不使用状态管理工具，而是使用react navigation本身）

Answer 1

您可以这样做，但要检查 TabNavigator 中的子导航状态 screenOptions。

screenOptions={({ route, navigation }) => {
  // get wallet stack route
  const walletStack = navigation.getState().routes.find((route) => route.name === 'Wallet');
  // get current wallet stack focused screen
  const walletRouteName = getFocusedRouteNameFromRoute(walletStack);
  const shouldBeUnfocused =
        walletRouteName === 'Send' || walletRouteName === 'Receive';
  {...}
}

基于shouldBeUnfocused您可以渲染适当的图标和颜色。这是关于自定义标签栏外观的snack with example code. You can red here。