React Native Router Flux - 导航到场景并返回 - 与另一个冲突 child

Question

我正在使用 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 场景（通过设置页面上的 link 访问）导航到房间选项卡场景。我正在使用以下代码执行此操作：

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

效果很好，可以正确导航到房间页面。

现在的问题是，如果我返回设置页面并单击 link 将我带到添加房间页面，那么我会收到以下错误消息：

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

我还注意到，如果我在设置页面上单击任何其他 link，则会将我带到添加房间页面，而不是正确的页面。

我该如何解决这个问题？

Answer 1

如何返回设置页面？

你的"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" />

Answer 2

<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 场景。

Answer 3

根据@Ataomega 的回答，我选择了弹出回到“设置”然后回到房间页面的选项，这似乎工作得很好：

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

React Native Router Flux - 导航到场景并返回 - 与另一个冲突 child

React Native Router Flux - Navigating to scene and back - conflicts with another child

reactjs

react-native

react-router

react-native-router-flux