React Native使用React Navigation仅移除当前页面保留前序导航栈

解决方案 #

你之前的写法有问题是因为reset方法会直接覆盖整个导航栈，你只传入了ItemDetails一个路由，所以原有栈里的HomeScreen也被同步清除了。可以用以下两种方法实现需求： #

方法1：使用replace方法（推荐）

React Navigation 提供了专门的路由替换API navigation.replace，作用就是将当前栈顶的路由替换为目标路由，原有栈中当前路由之前的所有页面都会保留，刚好符合你要移除当前ItemList、保留HomeScreen的需求。
使用代码如下：

props.navigation.replace("ItemDetails")

如果跳转需要携带参数，直接加第二个参数即可：

props.navigation.replace("ItemDetails", { itemId: 123 })

方法2：使用reset方法（自定义栈结构）

如果你需要用reset实现，需要在routes数组里完整声明你要保留的所有栈路由，index参数指定当前显示的路由在routes数组中的下标：

props.navigation.reset({
  index: 1,
  routes: [
    { name: "Home" }, // 保留原有Home页面
    { name: "ItemDetails" } // 替换原有ItemList为ItemDetails
  ]
})

如果Home或者ItemDetails需要携带原有参数，在对应路由项中添加params字段即可。 #

内容的提问来源于stack exchange，提问作者Wai Yan Hein