React-Native：组件仅在使用 react-native-navigation 或 react-navigation 时加载的最后一个选项卡上正常工作

Question

我有一个非常简单的两个标签应用程序：

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { TabNavigator } from 'react-navigation';

import {
  Sports,
  News,
} from 'externalComponents';

const MyApp = TabNavigator({
  Sports: { screen: Sports },
  News: { screen: News },
});

AppRegistry.registerComponent('MyApp', () => MyApp);

体育和新闻组件由另一家公司提供，我无法编辑该代码。如果我将它加载到 TabBarIOS 组件中，一切正常，所有选项卡都按预期工作。但是，对于 react-native-navigation 和 react-navigation，只有最后加载的选项卡才能正常工作。

News 和 Sports 组件都像这样加载 JSONDownloadService 组件：

downloadService = new JSONDownloadService(this);

然后它调用这个：

downloadService.getJSON(this.state.url, type)

现在在 JSONDownloadService 因为它已经在其构造函数中传递了 NEWS 或 SPORTS 组件，所以它被传递 updateComponent （未被调用的部分正确）。 getJSON() 看起来像这样：

getJSON(url, type) {
  //set up vars...
    fetch(request, init)
        .then(function (response) {
          // ...some code
        })
        .then(function (response) {
            if (response) {
                try {
                 // supposed to call `updateComponent` in News & Sports:
                    callback.updateComponent(response, type);
                }
                catch (err) {
                    console.log(err);
                }
            }
        })
        .catch(function (error) {
            console.error(error);
        });
}

麻烦的是，updateComponent() 只会被 tabBar 中加载的最后一个组件调用。如果我改变他们的位置，只有最后一个有效。除了，如果我在最后一个选项卡中注释掉与 JSONDownloadService 相关的代码，那么第一个选项卡就可以正常工作。似乎无论哪个组件最后使用它都会阻止其余组件更新。我如何使用 react-native-navigation 或 react-navigation 来完成这项工作？

在此先感谢您的帮助！

Answer 1

事实证明，TabBarIOS 有效而 react-navigation 和 react-native-navigation 无效的原因是后两者一次加载所有选项卡。在这种情况下，它重载了 JSONDownloadService 组件。

我至少可以使用以下代码在 react-navigation 中修复它：

const MyApp = TabNavigator({
  Sports: { screen: Sports },
  News: { screen: News },
}, {
  lazy: true, //used to be called "lazyLoad"
});

它只会导致应用延迟加载每个选项卡的内容。