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

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

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本机导航

和

react导航

，只有最后加载的选项卡才能正常工作

News

和

Sports

组件都加载

JSONDownloadService

组件，如下所示：

downloadService = new JSONDownloadService(this);

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);
        });
}

然后它称之为：

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

现在，在

JSONDownloadService

中，由于已在其构造函数中传递了

NEWS

或

SPORTS

组件，因此传递了

updateComponent

（未正确调用的部分）。

getJSON（）

看起来像这样：

downloadService = new JSONDownloadService(this);

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（）

仅由选项卡栏中加载的最后一个组件调用。如果我改变他们的位置，只有最后一个能起作用。除此之外，如果我在最后一个选项卡中注释掉与

JSONDownloadService

相关的代码，那么第一个就可以了。似乎无论最后使用哪个组件，都会阻止其余组件更新。如何使用

react本机导航

或

react导航

---

提前感谢您的帮助

事实证明，之所以

TabBarIOS

有效，而

react导航

和

react本地导航

无效，是因为后两种方法一次加载所有选项卡。在本例中，它重载了

JSONDownloadService

组件

我能够在

react导航中修复它，至少使用以下代码：

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

这只会导致应用程序延迟加载每个选项卡的内容。
这是否仍然有效？在我的代码中，lazyload或lazyload对react native的最新版本没有任何影响（所有控制器都在应用程序启动时加载）