在 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 现在位于 Movies 堆栈的顶部，而 MovieList 位于底部

2) 移动到不同的选项卡（导航堆栈）

然后我点击 Shows（第二个选项卡），使用 props.navigation.navigate('ShowList') 将我带到 ShowList

3) 问题

如果我单击“电影”选项卡，我希望会被移回 MovieList，但由于 MovieDetail 从未被卸载，它仍然位于“电影”堆栈的顶部，这意味着我看到的是旧屏幕。我必须单击两次才能返回 MovieList 屏幕。

我已经阅读了很多关于如何使用 onFocus/onBlur 订阅的建议，但是我找不到使用 React Hooks 的解决方案。

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

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") 可以解决问题。因此，无论您发现自己处于堆栈的哪一层，每次点击星标标签时，您总是会回到原来的顶层。