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

Question

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

目前，我的应用屏幕上有 2 个标签。一个选项卡向用户显示天气信息，第二个选项卡控制用户希望在第一个选项卡中查看他/她的天气预报的内容。所以第二个选项卡本质上是一个设置屏幕，而第一个屏幕是 GUI 发生的地方。现在，在我的第二个选项卡中，一旦用户更改了他/她的选项，我想确保他们通过单击屏幕上的按钮来保存他们的偏好。现在，这是我的反应导航问题出现的地方，我希望第二个选项卡以这样的方式工作，当用户点击第一个选项卡时，会弹出一个警报，询问他们，“你确定你想要离开此页面而不保存？是/否”如果他们单击“否”，我希望他们留在此选项卡中，如果他们单击“是”，我希望他们返回第一个选项卡。

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

这是我的代码：

export const Tabs = TabNavigator({
  WeatherDisplay: {
    screen: WeatherDisplay,
    navigationOptions: {
      header: null,
      tabBarLabel: 'Weather',
      tabBarIcon: ({ tintColor }) => 
    },
  },

  WeatherOptions: {
    screen: WeatherOptions,
    navigationOptions: {
      header: null,
      tabBarLabel: 'Weather Options',
      tabBarIcon: ({ tintColor }) => 
    },
  },
}, {
    animationEnabled: true,
    swipeEnabled: false,
    gesturesEnabled: false,
    tabBarOptions: {
      inactiveTintColor: 'gray',
      showIcon: true,
      activeTintColor: '#D088EB',
      showLabel: false,
      indicatorStyle: {
        borderBottomColor: '#D088EB',
        borderBottomWidth: 2,
      },
      style: {
        backgroundColor: '#F8F8F8',
      },
      onTabPress: (tab) => {
        if (tab.index == 0) {
          Alert.alert("Save", "Dont forget to save your weather!");
        }
      }
    },
  }
);

到目前为止，我已经在网上进行了广泛的研究和阅读，并且一直在研究 react-navigation 文档，但我似乎找不到与 onTabPress 相关的功能。在我上面的代码中，onTabPress 仅适用于 android 而不适用于 iOS，这意味着当用户更改选项卡时会调用 onTabPress() 函数，但这仍然不能解决我的问题，因为我只希望用户更改选项卡弹出警报时单击“是”。目前，该代码只是发送一个警报，但仍会自动更改屏幕，并且仅适用于android。

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

感谢您的帮助！感谢您阅读本文！

Answer 1

为了能够控制标签点击行为，我创建了自己的标签标题栏实现。这样您就可以控制每次点击的作用。

连接自定义标签栏：

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

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

this.props.navigation.navigate(scene);

至于渲染问题，这通常表明有问题的数据流到您的组件中。看看将 Redux 与 react-native 结合使用，它使状态管理和渲染更加可靠和可预测。