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 - 导航到场景并返回 - 与另一个孩子冲突

回答

相关问题