在 react-native 中将路由推送到 Navigator

Question

我很难理解 Navigator 组件。 我有一组预设路线

routes: [{
    name: 'settings'
}, {
    name: 'feed'
}, {
    name: 'matches'
}]

所以应用程序从 Feed 页面开始，然后您可以使用 NavigationBar 在 3 条路线之间来回切换 [为方便起见，从代码中省略]

<Navigator initialRoute={config.routes[1]}
           initialRouteStack={config.routes}
           renderScene={this.renderScene}} />

现在，我想介绍一条新的临时路线 [有点像 instagram/spotify] 因此，在 Feed 路由上，当您单击“显示配置文件”时，它会将新路由推送到堆栈。

this.props.nav.push({
  name: 'profile',
  sceneConfig: Navigator.SceneConfigs.FloatFromBottom
})

现在，令人讨厌的是，它完全取代了 Matches 路线，因为当我弹出这条路线以返回 Feed 时。比赛路线已完全删除。 我查看了 API 并尝试使用 replace 方法等，但不断得到时髦的结果。

请参阅下面的 GIF 以获得更好的理解。

这是使用导航器的正确方法，有一组预设的路线吗？我在 NavigationBar 中使用 jumpBack/jumpForward 在它们之间移动，但是我无法为预设路线提供特定的场景配置。我该怎么做呢？例如，如果我想设置路由到 FloatFromBottom？

Answer 1

我认为问题在于您首先使用的是路由堆栈。在我的应用程序中，我将所有场景转换编码到逻辑中，并不断将场景推送和弹出到堆栈中。

我认为使用 initialRouteStack 可能不足以满足您的用例。阅读http://devdocs.io/react_native/navigator

push(route) - 向前导航到一个新场景，挤压任何你可以跳转到的场景

所以你看到当你使用push 时你破坏了第三个场景。尝试在不预先确定场景的情况下重组您的应用以推送和弹出。

您也可以尝试将配置文件路线添加为第 4 个场景并在它们之间进行过渡。