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）移至其他选项卡（导航堆栈）

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

3）问题

如果我单击“电影”选项卡，则希望移回MovieList，但是由于MovieDetail从未卸载，因此它仍位于Movies堆栈的顶部，这意味着我看到的是旧屏幕。我必须单击两次以返回到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");
      },
    }),
  },

在BottomTabNavigator中，Star是我的屏幕之一，使用navigation.navigate（“ You Screen”）可以解决问题。因此，无论您处于堆栈的哪个级别，每次单击“星号”选项卡时，您总会到达原始的顶级级别。

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

1 个答案: