2017-07-15 125 views
1

enter image description here如何在反應天然使用反應導航

我有一個登錄屏幕,當用戶登錄他們被帶到類似於上面所示的一個屏幕同時添加搜索欄和標籤按鈕。

在此屏幕中,我有一個tabNavigator,其中包含5個屏幕的選項卡,類似於上圖中顯示的選項卡。它也有一個標題有點與搜索欄中的東西。這個標題只應該顯示在5個標籤中的4個,並且我需要在第5個標籤中顯示不同的標題。

有沒有辦法做到這一點?我知道我可以在5個標籤中的4個標籤中添加一個視圖,這個標籤在第5個屏幕中呈現相同的標題和視圖,呈現不同的標題,但我想知道是否有一種方法可以做到這一點,而不必呈現相同一次又一次查看所有4個選項卡。在FifthPage

const TabNav = TabNavigator({ 
    First: { screen: FirstPage }, 
    Second: { screen: SecondPage }, 
    Third: { screen: ThirdPage }, 
    Fourth: { screen: FourthPage }, 
    Fifth: { screen: FifthPage } 
}, { 
    navigationOptions: { 
    header: <SearchHeader /> 
    } 
}) 

然後定製navigationOptions

PS應該在iOS和Android的合作

回答

2

您可以通過navigationOptions配置的TabNavigatorheader

class FifthPage extends Component { 
    static navigationOptions = { 
    header: <FifthPageHeader /> 
    } 
} 

我只是在Expo Snack上創建了一個演示:https://snack.expo.io/rJDGpmPHZ,第5個屏幕有一個藍色的h埃德爾,其他人有一個紅色的。

TabNavigator的文檔https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options,它沒有列出header選項,我認爲它會傳遞到StackNavigator

+0

你是如何將標題傳遞給tabNavigator的,如果它不可能的話。我知道它可以在stacknavigator中使用,但是您是如何在Tabnavigator中執行此操作的?我檢查了你上傳的演示代碼,但是當我嘗試在我的tabnavigator中放置標題時,它無法正常工作 – Chetan

+0

@Chetan我也想知道如何做到這一點!你有沒有找到解決方案!你可以請檢查我的問題:https://stackoverflow.com/questions/46296119/adding-tab-component-in-a-view – Yasir