React-Native：組件僅在使用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組件中，則一切正常，所有選項卡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與JSONDownloadService有關的代碼， JSONDownloadService第一個可以正常工作。 似乎最后使用哪個組件都會阻止其余組件的更新。 如何使用react-native-navigation或react-navigation進行這項工作？

在此先感謝您的幫助！

Answer 1

事實證明， TabBarIOS起作用且react-navigation和react-native-navigation不起作用的原因是因為后兩個同時加載所有選項卡。 在這種情況下，它使JSONDownloadService組件過載。

我至少可以使用以下代碼在react-navigation中react-navigation進行修復：

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

只會導致應用延遲加載每個標簽的內容。