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

它只是让应用程序懒洋洋地加载每个标签的内容。

React-Native：组件仅在使用react-native-navigation或react-navigation

1 个答案: