使用react-native-router-flux的自定義導航欄

我似乎無法找到任何用於創建自己的導航欄組件的完整示例，然後將其連線至react-native-router-flux。誰能幫我嗎？看看github問題，似乎這是圖書館的一大需求。我想要做的是：使用react-native-router-flux的自定義導航欄

使用左按鈕和右側圖片創建一個新組件。
讓按鈕圖標根據場景而改變，但在右側使用相同的圖像。
將其連接到react-native-router-flux，以便navBar正確顯示並跟蹤默認navBar所執行的用戶位置跟蹤。

謝謝！

來源

2017-02-14 Shorpy

這是我遇到的一個類似問題。網上沒有教程告訴你如何使用自定義導航欄。我找到了一種適合我的方式。試試這個：

<Router navBar = {MainNavBar}> 
    <Scene key = "home" component = {HomeScreenContainer} title = "Home" initial = {true} /> 
</Router>

這是你定義場景的主要根組件的代碼。您必須在路由器或任何需要導航欄的場景中傳遞導航欄組件。

而且你的導航欄將是這樣的：

<NavigationBar  
    leftComponent = {<TouchableOpacity><Icon name="sidebar" /></TouchableOpacity>} 
    centerComponent = {<Title>{props.title}</Title>} 
    />

希望這有助於:)

來源

2017-03-25 12:41:28

哇。那小小的一點救了我很多痛苦和頭痛。我只需要一個場景的自定義導航欄，並將其添加到那裏，並且完美無瑕。謝謝。 – jakeatwork

好吧......另一個問題，我已經做到了，它工作得很好，但導航欄組件不隨導航欄移動。它保持放在頁面上，並在頁面滾動時顯示其他內容。有任何想法嗎？ – jakeatwork

使用react-native-router-flux的自定義導航欄

回答

相關問題