反応し、ネイティブ：コンポーネントのみ反応するネイティブ・ナビゲーションや反応ナビゲーションを

Question

を使用しているときにロードされた最後のタブに正常に動作し、私は非常に単純な2つのタブのアプリがあります。スポーツやニュースのコンポーネントがある

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の場合、最後にロードされたタブのみが正常に動作します。

downloadService = new JSONDownloadService(this); 

そしてそれは、この呼び出します：

NewsとSportsコンポーネントの両方がこのようJSONDownloadServiceコンポーネントをロード

JSONDownloadServiceで今

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

それはNEWSかSPORTSコンポーネントを渡されたので、そのコンストラクタでは、updateComponent（正しく呼び出されていない部分）が渡されます。

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()がしかタブバーにロードされた最後のコンポーネントによって呼び出されます：getJSON()は次のようになります。ポジションを切り替えると、最後のポジションだけが機能します。ただし、最後のタブで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" 
}); 

それだけでアプリが遅延し、各タブのコンテンツをロードするようになります。