React native Stack navigator返回处理程序

nmpmafwu  于 2023-04-12  发布在  React
关注(0)|答案(2)|浏览(144)

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;
dgsult0t

dgsult0t1#

为什么你要处理一个返回事件?相反,使用导航reset属性,它会将你的路由重置为0,用户将永远不会返回,因为stake是空的

htzpubme

htzpubme2#

React Native提供了Stack Navigator组件,作为在应用程序中实现导航系统的一种方式。Stack Navigator允许您通过将屏幕添加到堆栈来在屏幕之间导航,然后当您想要返回到上一个屏幕时,将它们弹出堆栈。
要在React Native应用中使用Stack Navigator,首先需要安装react-navigation库:

npm install @react-navigation/native

然后,您需要安装堆栈导航器:

npm install @react-navigation/stack

一旦安装了这些包,就可以使用@react-navigation/stack库中的createStackNavigator函数创建堆栈导航器。
以下是如何在React Native中创建基本堆栈导航器的示例:

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和DetailsScreen。当应用首次启动时,会显示HomeScreen。当用户点击按钮或链接以转到DetailsScreen时,它会添加到堆栈顶部并显示。当用户想要返回HomeScreen时,他们可以点击返回按钮,这将弹出DetailsScreen堆栈并再次显示HomeScreen。
有很多选项和配置可以应用于Stack Navigator,例如添加自定义头文件,设置默认屏幕选项,以及在屏幕之间传递参数。您可以参考官方React Navigation文档,了解如何在React Native应用中使用Stack Navigator的更多细节。

相关问题