让堆栈导航器始终呈现 initialRoute答案

【问题标题】：Have a stack navigator always render initialRoute让堆栈导航器始终呈现 initialRoute
【发布时间】：2018-11-09 20:38:55
【问题描述】：

我正在构建一个 react 本机应用程序，并且正在使用 react-navigation 包。我有一个应用程序的选项卡导航器，每个选项卡都有一个堆栈导航器。像这样的：

const HomeStack = StackNavigation({
    Info: {screen: Info},
    Main: {screen: Main}
})

const SearchStack = StackNavigation({
    Search: {screen: Search},
    SearchResult: {screen: SearchResult}
})

TabNavigation({
  Home: {screen: HomeStack},
  Search: {screen: SearchStack}
})

假设我进行了搜索，现在我在 SearchResult 屏幕上。然后我按主页选项卡返回主屏幕。现在，当我返回搜索选项卡时，它会显示 SearchResult 屏幕。有没有办法强制 react-navigation 在您从选项卡转到搜索屏幕时始终呈现搜索屏幕？

我做了一个关于零食的项目来说明这个https://snack.expo.io/rkMzWoh17

【问题讨论】：

标签： javascript react-native react-navigation tabnavigator

【解决方案1】：

在这样的搜索堆栈导航中使用这样的初始路由名称

 {
    initialRouteName: 'Search',
  }

【讨论】：

我的代码中确实有这个，但它只适用于初始渲染。一旦我在堆栈中导航，它就会将该屏幕存储在历史记录中，并在我转到选项卡时呈现它。
可能会弹出 SearchStack 中的所有屏幕，然后导航到您的主屏幕。因此，当您导航回堆栈时，它将从初始屏幕开始。

【解决方案2】：

您可以在每个堆栈屏幕中使用类似的东西。

   const Search = ({ navigation }) => {
      useLayoutEffect(() => {
          const blur = navigation.addListener('blur', () => {
            navigation.popToTop();
          });
      }, []);
   }

每次您离开时都会将堆栈弹出到初始屏幕。

更多信息在这里：https://reactnavigation.org/docs/navigation-events

【讨论】：