Question

我需要一些解决方案来解决我遇到的反应导航问题。我将首先列出我想要完成的工作以及是否可以通过反应导航：

目前，我的应用程序屏幕上有2个标签。一个选项卡向用户显示天气信息，第二个选项卡控制用户想要在第一个选项卡中的天气预报中看到的内容。因此，第二个选项卡实际上是一个设置屏幕，而第一个屏幕是GUI发生的位置。现在，在我的第二个标签中，一旦用户更改了他/她的选项，我想确保他们通过单击屏幕上的按钮来保存他们的首选项。现在，我的反应导航问题就在这里，我希望第二个选项卡能够以这样的方式工作：当用户点击第一个选项卡时，会弹出一个警告，询问他们，＆＃34;你是不是确定要保留此页面而不保存？是/否＆＃34;如果他们单击否，我希望他们留在此选项卡中，如果他们单击是，我希望他们返回到第一个选项卡。

我遇到的第二个问题是当用户进入他/她的第二个选项卡编辑天气设置，保存他们的更改并返回第一个选项卡时，第一个选项卡仍会显示他们的旧信息，因为它没有重新呈现。从第二个选项卡返回时，如何重新呈现第一个选项卡。示例：当湿度％关闭时，汤姆首先加载他的天气，然后他转到第二个标签，打开湿度并保存他的更改，但是当他回到第一个标签时，湿度％没有显示，因为组件永远不会重新渲染。

这是我的代码：

import {bindable, inject} from 'aurelia-framework';

export class CardCommit {
  @bindable public taskData;

  constructor(taskData) {
    Object.entries(taskData).forEach(([key, val]) => {
       Object.assign(this, {[key]: val});
    });
  }

  // ... other methods etc
}

到目前为止，我已经在线进行了广泛的研究和阅读，并且一直在反对反应导航文档，但我似乎无法找到与onTabPress相关的功能。在上面的代码中，onTabPress仅适用于Android而不适用于iOS，这意味着当用户更改选项卡时会调用onTabPress（）函数，但这仍然无法解决我的问题，因为我只想更改选项卡用户点击“是”＆＃39;当警报弹出时。目前，代码只发送一个警报，但仍然自动更改屏幕，它只适用于Android。

就我的第二个问题而言，当我更改标签时重新渲染整个屏幕，我不知道我会怎么做。

我感谢任何帮助！谢谢你阅读本文！

Answer 1

为了能够控制选项卡点击行为，我创建了自己的选项卡标题栏实现。这样您就可以控制每次点击的内容。

连接自定义标签栏：

AsyncLocal<T>

组件本身可以是您喜欢的任何东西。要在单击选项卡时导航，请使用：

const TabBarNav = TabNavigator({
      "main": {screen: MainScreen}
    }, {
      tabBarComponent: MainNavBar,
    }
);

至于渲染问题，这通常表示有问题的数据流进入组件。看看使用Redux和react-native，它使状态管理和渲染更加可靠和可预测。

React Navigation Tabbar检测标签栏按下并重新渲染屏幕

1 个答案: