React本地堆栈导航器后处理程序

Question

react react Native stack Navigator从我想从几页中转到以前的页面的每个页面上的默认路由（InitialRoutEname）到主页，并从几页中禁用从几页。在这种情况下，Back Handler甚至没有帮助。我该如何实现这个

     class AppNavigator extends Component {
      constructor(props) {
        super(props)
        this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    }
    componentWillMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
    }
    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
    }
    handleBackButtonClick() {
        this.props.navigation.goBack();
        return true;
    }
      render() {
        return;
      }
    }
    export default AppNavigator;

抽屉导航器的代码。所有路线也在此处定义。

        import React from "react";
    import { DrawerNavigator } from "react-navigation";
    import Home from "./components/home/";
    import SideBar from "./components/sidebar";
    import Dashboard from "./components/Dashboard/";
    import Profile from "./components/Profile"
    import Contact from "./components/Contact"
    import Terms from "./components/terms"
    import Links from "./components/Links"
    import Register from "./components/Register"
    import Discover from "./components/Discover/";

    const Drawer = DrawerNavigator(
      {
        Home: { screen: Home },
        Dashboard: { screen: Dashboard },
        Discover: { screen: Discover }
        Profile : {screen: Profile},
        Contact: { screen: Contact},
        Terms: { screen: Terms},
        Links: { screen: Links},
        Register: { screen: Register,
          navigationOptions: {
            title: "FirstPage",
            header: {
              left: null,
            }
          }, },
      },
      {
        initialRouteName: "Home",
        contentOptions: {
          activeTintColor: "#e91e63"
        },
        drawerPosition: 'right',
        contentComponent: props => <SideBar {...props} />
      }
    );

    export default Drawer;

Answer 1

为什么要处理后背事件？相反，使用导航reset属性，该属性将您的路由将您的路线重置为0，并且用户永远不会返回，因为股权为空

Answer 2

React Native提供堆栈Navigator组件，作为在应用程序中实现导航系统的一种方法。堆栈Navigator允许您通过将它们添加到堆栈中在屏幕之间导航，然后在要返回以前的屏幕时将它们从堆栈中弹出。

要在您的React Native应用中使用堆栈导航器，您首先需要安装React-Navigation库：

npm install @react-navigation/native

然后，您需要安装堆栈导航器：

npm install @react-navigation/stack

安装了这些软件包后，您可以使用 @react-navigation/stack库中的CreateStackNavigator函数创建堆栈导航器。

这是一个示例，说明如何在React Native中创建基本堆栈Navigator：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

在此示例中，我们定义了一个带有两个屏幕的堆栈导航器：HOMESCREEN和详细信息屏幕。当该应用首次启动时，将显示房屋屏幕。当用户点击按钮或链接以转到详细信息屏幕时，将其添加到堆栈顶部并显示。当用户想返回房屋屏幕时，他们可以点击"后退"按钮，该按钮将在堆栈中弹出详细信息并再次显示房屋屏幕。

您可以将许多选项和配置应用于堆栈导航器，例如添加自定义标头，设置默认屏幕选项以及屏幕之间传递参数。您可以参考官方React导航文档，以获取有关如何在React Andive App中使用堆栈导航器的更多详细信息。