React Native Router Flux - 導航到場景並返回 - 與另一個孩子衝突

我正在使用react-native-router-flux，並且遇到了在場景之間導航的問題，它讓我瘋狂！React Native Router Flux - 導航到場景並返回 - 與另一個孩子衝突

這是我的路由器：

<Router navigationBarStyle={styles.navigationBody} titleStyle={styles.navigationTitle} duration={0} > 
    <Scene key="root"> 
     <Scene key="addNode" component={HA_AddNode} socket={socket} rooms={["Living Room", "Master Bedroom", "Hall", "Office"]} nodes ={["Light Switch", "Socket"]} title="Add Node" backTitle="Back" backButtonTextStyle={{color: 'white'}} backButtonImage={require('./images/back_arrow_icon.png')} onLeft={()=> Actions.pop()} /> 
     <Scene key="addRoom" component={HA_AddRoom} socket={socket} locations={["Downstairs", "Upstairs"]} title="Add Room" backTitle="Back" backButtonTextStyle={{color: 'white'}} backButtonImage={require('./images/back_arrow_icon.png')} onLeft={()=> Actions.pop()} /> 
     <Scene key="tabBar" tabs style={styles.tabBar} initial={true}> 
     <Scene key='dashboard' component={HA_Dashboard} title='Dashboard' initial={true} icon={HA_TabIcon} iconTitle="ios-home-outline" /> 
     <Scene key='rooms' component={HA_Rooms} title='Rooms' icon={HA_TabIcon} iconTitle="ios-list-box-outline" /> 
     <Scene key='settings' component={HA_Settings} title='Settings' icon={HA_TabIcon} iconTitle="ios-settings-outline" /> 
     </Scene> 
    </Scene> 
    </Router>

我是什麼想實現的是，當我按下了一個按鈕，X秒後，它從addRoom場景導航（這是通過鏈接訪問設置頁面上）到房間標籤場景。我正在用以下代碼執行此操作：

timer.setTimeout(this, 'roomsNavigate',() => Actions.rooms(), 2500);

工作正常，並正確導航到房間頁面。

現在的問題是，如果我回去的設置頁面，點擊鏈接帶我到添加會議室頁面，然後我得到以下錯誤：

navigationState.children[2].key "scene_addRoom_1_addRoom" conflicts withanother child!

我也注意到，如果我點擊設置頁面上的任何其他鏈接，然後將我帶到添加房間頁面，而不是其正確的頁面。

我該如何解決這個問題？

來源

2017-02-24 Tenatious

<Router navigationBarStyle={styles.navigationBody} titleStyle={styles.navigationTitle} duration={0} > 
    <Scene key="root"> 
     <Scene key="addNode" component={HA_AddNode} socket={socket} rooms={["Living Room", "Master Bedroom", "Hall", "Office"]} nodes ={["Light Switch", "Socket"]} title="Add Node" backTitle="Back" backButtonTextStyle={{color: 'white'}} backButtonImage={require('./images/back_arrow_icon.png')} onLeft={()=> Actions.pop()} /> 
     <Scene key="addRoom" component={HA_AddRoom} socket={socket} locations={["Downstairs", "Upstairs"]} title="Add Room" backTitle="Back" backButtonTextStyle={{color: 'white'}} backButtonImage={require('./images/back_arrow_icon.png')} onLeft={()=> Actions.pop()} /> 
     <Scene key="tabBar" tabs style={styles.tabBar} initial={true}> 
     <Scene key='dashboard' component={HA_Dashboard} title='Dashboard' initial={true} icon={HA_TabIcon} iconTitle="ios-home-outline" /> 
     <Scene key='rooms' component={HA_Rooms} title='Rooms' icon={HA_TabIcon} iconTitle="ios-list-box-outline" /> 
     <Scene key='settings' component={HA_Settings} title='Settings' icon={HA_TabIcon} iconTitle="ios-settings-outline" /> 
     </Scene> 
    </Scene> 
    </Router>

您不能導航到儀表板，房間或來自addNode或addRoom場景的設置。您只能導航到它們的tabBar場景。

但是從儀表板，房間和設置場景中，您可以導航到addNode或addRoom場景。

來源

2017-02-24 08:28:09 Ataomega

啊。我沒有意識到是這樣。你能解釋一下一篇文章，解釋一下這個背後的基本原理嗎？那麼我理論上是否需要導航到tabBar然後導航到房間？ – Tenatious

@Tenatious嗯，我沒有任何鏈接，但我花了一些時間來弄清楚rn-router-flux中有什麼可能。是的，您可以通過傳遞一些道具導航到tabBar。由於儀表板是Tabbar中的初始視圖，因此必須根據這些道具重新導航到另一個場景。我不確定這是否是個好主意。 – Ataomega

你如何回到設置頁面？

您的「addRoom」場景已添加到堆棧，可以解釋此衝突。

你有幾個解決方案來解決這個問題（但那會改變行爲）。

A）重設棧當您打開addRoom現場

timer.setTimeout(this, 'roomsNavigate',() => Actions.rooms({type: ActionConst.RESET}), 2500);

B）重設棧，當你在設置現場

<Scene type={ActionConst.RESET} key='settings' component={HA_Settings} title='Settings' icon={HA_TabIcon} iconTitle="ios-settings-outline" />

來源

2017-02-24 07:24:02 jpclair

選項A從標籤欄移除儀表板和設置，只留下房間圖標/標題，並使狀態欄變黑。選項B的功能相同，但是當您單擊設置圖標時。刪除儀表板和房間。 – Tenatious

對不起，我沒有看到它是在一個標籤欄內。 Ataomega的說明是正確的答案。您無法直接從外部打開選項卡。只能從tabbar的最初標籤直接到達。 – jpclair

基於@Ataomega答案我去彈出回到設置，然後到房間頁面，這似乎很好地工作的選項：

timer.setTimeout(this, 'roomsNavigate',() => { 
    Actions.pop() 
    setTimeout(()=>{ 
     Actions.rooms() 
    }) 
}, 2500);

來源

2017-02-24 18:17:03 Tenatious

React Native Router Flux - 導航到場景並返回 - 與另一個孩子衝突

回答

相關問題