时间戳

首页 > 解决方案 > 在 React Native 中移动到另一个屏幕时如何卸载屏幕

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

问题描述

我正在使用 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)问题

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

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

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

标签： react-hooksreact-native-navigationreact-navigation-stackreact-lifecycle-hooks

解决方案

我找到了一种方法，可以让您在单击任何底部选项卡图标时更轻松地始终移动到堆栈的初始顶部。

您只需要像这样添加 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") 可以解决问题。因此，无论您发现自己处于堆栈的哪个级别，每次单击星标选项卡时，您总是会回到原始的顶层。

推荐阅读