反应本性:仅在使用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()仅由tabar中的最后一个组件来调用。如果我切换他们的位置，只有最后一个工作。除了，如果我在最后一个选项卡中评论与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"
});

它只是使应用程序懒洋洋地加载每个选项卡的内容。