如何在React Native中移动到另一个屏幕时卸载屏幕？

Question

我正在使用React Navigation v4、React Hooks和ES6开发一个React Native应用。

我有2个底部标签（电影、节目）和4个屏幕，其堆栈结构如下。

**Movies**
 -- MovieList
 -- MovieDetail

**Shows**
 -- ShowList
 -- ShowDetail

我的方案

1) 从电影列表移动到个人电影页面。

MovieList包含了一个电影列表，当我点击其中一个电影时，我首先会获取一些API数据，然后移动到MovieDetail屏幕，就像这样

dispatch(apiFetchActions.fetchMovies(movieId)).then((response) => {      
      props.navigation.navigate({
        routeName: "MovieDetail",
        params: {
          assetId: movieId,
          assetName: movieTitle,
        },
      });

MovieDetail现在位于 "电影 "堆栈的顶部，而MovieList则位于底部。

2) 移动到不同的标签页（导航栈）。

然后，我点击 "显示"（第二标签），使用props.navigation.navigate('ShowList')将我带到 "显示列表"。

3) 问题

如果我点击 "电影 "选项卡，我希望被移回 "电影列表"，但由于 "电影详情 "从未被卸载，它仍然在 "电影 "堆栈的顶部，这意味着我看到的是一个旧屏幕。我必须点击两次才能回到MovieList屏幕。

我阅读了不少关于如何使用onFocusonBlur订阅的建议，然而我无法找到使用React Hooks的解决方案。

我理想的解决方案是找到一种方法 以监听MovieDetail屏幕中的onBlur状态，可能会使用useEffect钩子，并在离开前以某种方式解除它。

Answer 1

我发现了一种方法，当你点击任何底部标签图标时，可以更容易地移动到堆栈的初始顶部。

你只需要像这样添加on Press和屏幕引用就可以了

Stars: {
    screen: StarsNavigator,
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: (tabInfo) => {
        return (
          <Ionicons name="ios-people" size={22} color={tabInfo.tintColor} />
        );
      },
      tabBarLabel: Platform.OS === "android" ? <Text>Stars</Text> : "Stars",
      tabBarOnPress: () => {
        navigation.navigate("StarsList");
      },
    }),
  },

Star是我在BottomTabNavigator中的一个屏幕，使用navigation.navigate("You Screen")就可以了。所以不管你在哪一层的堆栈中，每次你点击Star标签，你总是会回到原来的顶层。