0

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

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

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

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

downloadService = new JSONDownloadService(this);

然后它称之为：

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

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

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-navigationor完成这项工作react-navigation？

提前感谢您的帮助！

4

1 回答 1

0

事实证明，原因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"
});

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

于 2017-06-04T06:59:21.393 回答