2017-07-24 91 views
0

使用TabNavigator製作了選項卡視圖。這裏是我使用的library。總計我有3個選項卡。所以初始選項卡加載&渲染罰款沒有麻煩。但問題在於第三個標籤。我在第三個標籤組件中的每個方法中檢查了console.log()。每個方法都在執行,但不顯示結果(顯示空白屏幕),直到我與之交互。當我開始與它交互時,只有數據是重新渲染的(我認爲是這樣)。在堆棧導航器標籤上單擊時渲染屏幕

我該如何解決這個問題?任何幫助?

感謝

回答

1

我用道具lazy真正的配置標籤導航解決它。以下是我修改的代碼。現在正在工作。

const TabView = TabNavigator({ 
         feed: { screen: Feed }, 
         info: { screen: Info }, 
         members: {screen: Members} 
         }, { 
         tabBarPosition: "top", 
         tabBarOptions: { 
          activeTintColor: "#4A90E2", 
          inactiveTintColor: "#4A4A4A", 
          style: { 
           backgroundColor: 'white', 
           height:56, 
           alignItems: 'center', 
           shadowColor: '#000000', 
           shadowOpacity: 0.1, 
           shadowRadius: 0, 
           shadowOffset: { 
            height: 2, 
            width: 1 
           } 

          }, 
          tabStyle: { 
           height: 40, 
          }, 
          labelStyle: { 
           fontSize:12, 
           fontFamily:'HelveticaNeue-Medium' 
          } 

         }, 
         lazy:true 
         }); 
+1

lazy:true意味着直到點擊後才顯示背景中的選項卡。懶惰:false,切換標籤將立即。如果在最後一個選項卡上顯示的是ListView或FlatList/SectionList,則可以嘗試在ListView上設置removeClippedSubviews = {false},這可能有助於組件無法正確顯示。 – hyb175

0

試試這個: 使每個標籤的數據作爲一個單獨的組件和你的標籤內分別導入。 例如:

<Tab1> 
<tab1 components/> 
</Tab1>