react-hooks - 在 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 Hook 的 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") 可以达到目的。因此，无论您发现自己处于堆栈的哪一层，每次单击“星标”选项卡时，您总是会回到原来的顶层。