如何在 StackNavigator 中导航后销毁屏幕？

Question

我有这样的导航结构

个人资料屏幕

设置屏幕

广告屏

现在我想从设置屏幕导航到广告屏幕，但我想从历史记录设置屏幕中删除。

我尝试了“NavigationActions.reset(”，但我想要一个简单的解决方案

Answer 1

您可以使用：

navigation.replace("AdScreen")

更换

用堆栈中的新屏幕替换当前屏幕。该方法接受以下参数：

• name - 字符串 - 推入堆栈的路由名称。

• params - 对象 - 要传递到目标路线的屏幕参数。

https://reactnavigation.org/docs/stack-navigator/#replace

Answer 2

要从“设置屏幕”导航到“广告屏幕”并从 React 导航设置中的导航历史记录中删除“设置屏幕”，您可以使用替换方法。此方法用新路由替换当前路由，从而有效地从历史堆栈中删除当前路由。具体方法如下：

确保已安装 React Navigation：应在项目中安装并正确设置 React Navigation。

使用替换方法：在“设置屏幕”组件中，您可以使用导航道具中的替换方法导航到广告屏幕。

示例：

// Import necessary dependencies
import React from 'react';
import { Button, View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const SettingsScreen = () => {
  const navigation = useNavigation();

  const handleNavigateToAdScreen = () => {
    navigation.replace('AdScreen');
  };

  return (
    <View>
      <Text>Settings Screen</Text>
      <Button title="Go to Ad Screen" onPress={handleNavigateToAdScreen} />
    </View>
  );
};

export default SettingsScreen;