如何在 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( 移动到其他选项卡(导航堆栈(

然后我点击显示(第二个选项卡(，它将我带到显示列表，使用props.navigation.navigate('ShowList'(

3(问题

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

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

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

Answer 1

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

您只需要像这样添加按压和屏幕参考

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"(就可以了。因此，无论您发现自己处于堆栈的哪个级别，每次单击"星号"选项卡时，您总是会到达原始的顶级。