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;
2条答案
按热度按时间dgsult0t1#
为什么你要处理一个返回事件?相反,使用导航
reset
属性,它会将你的路由重置为0,用户将永远不会返回,因为stake是空的htzpubme2#
React Native提供了Stack Navigator组件,作为在应用程序中实现导航系统的一种方式。Stack Navigator允许您通过将屏幕添加到堆栈来在屏幕之间导航,然后当您想要返回到上一个屏幕时,将它们弹出堆栈。
要在React Native应用中使用Stack Navigator,首先需要安装react-navigation库:
然后,您需要安装堆栈导航器:
一旦安装了这些包,就可以使用@react-navigation/stack库中的createStackNavigator函数创建堆栈导航器。
以下是如何在React Native中创建基本堆栈导航器的示例:
在这个例子中,我们定义了一个带有两个屏幕的堆栈导航器:HomeScreen和DetailsScreen。当应用首次启动时,会显示HomeScreen。当用户点击按钮或链接以转到DetailsScreen时,它会添加到堆栈顶部并显示。当用户想要返回HomeScreen时,他们可以点击返回按钮,这将弹出DetailsScreen堆栈并再次显示HomeScreen。
有很多选项和配置可以应用于Stack Navigator,例如添加自定义头文件,设置默认屏幕选项,以及在屏幕之间传递参数。您可以参考官方React Navigation文档,了解如何在React Native应用中使用Stack Navigator的更多细节。