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

I have a very simple two tab app:

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

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

The Sports and News components are provided by another company, and I cannot edit that code. If I load this into a TabBarIOS component, everything works fine and all tabs work as intended. However, with react-native-navigation and react-navigation, only the last tab loaded works properly.

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

Both the News and Sports components load a JSONDownloadService component like this:

News和Sports组件都加载了一个JSONDownloadService组件，如下所示：

downloadService = new JSONDownloadService(this);

And then it calls this:

然后它称之为：

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

Now in JSONDownloadService because it has been passed the NEWS or SPORTS component in its constructor, it gets passed updateComponent (the part that is not getting called correctly). The getJSON() looks something like this:

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

The trouble is, updateComponent() is only ever called by the last component loaded in the tabBar. If I switch their positions, only the last one ever works. Except, if I comment out the code relating to JSONDownloadService in the last tab, THEN the first one works fine. It seems that whichever component last uses it prevents the rest from updating. How can I make this work using react-native-navigation or react-navigation?

问题是，updateComponent（）只被tabBar中加载的最后一个组件调用。如果我改变他们的位置，只有最后一个有效。除非，如果我在最后一个标签中注释掉与JSONDownloadService相关的代码，那么第一个工作正常。似乎最后使用它的任何组件都会阻止其余组件的更新。如何使用react-native-navigation或react-navigation来完成这项工作？

Thanks in advance for any help!

在此先感谢您的帮助！

1 个解决方案

#1

It turns out, the reason TabBarIOS worked and react-navigation and react-native-navigation didn't was because the latter two load all the tabs at once. In this case it overloaded the JSONDownloadService component.

事实证明，TabBarIOS工作和反应导航和反应原生导航的原因不是因为后两者一次加载所有选项卡。在这种情况下，它重载了JSONDownloadService组件。

I was able to fix it in react-navigation at least using this code:

至少使用这段代码，我能够在react-navigation中修复它：

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

it just causes the app to lazily load the content for each tab.

它只会导致应用程序懒洋洋地加载每个标签的内容。

#1