我可以阻止用户返回 React Navigation 中的上一页吗?
Can I stop a User from returning to the previous page in React Navigation?
我对此有点陌生。我需要阻止用户在提交详细信息后导航回上一页。我需要你的帮助。有没有一种方法可以阻止用户返回到堆栈中的特定屏幕。这是我的 Stack 的一个片段。
在 ADD_CUSTOMER_DETAILS_2 之后,一旦用户导航到 ADD_CUSTOMER_PHOTOS,我想阻止用户导航回 ADD_CUSTOMER_DETAILS_2
function AddCustomerStack() {
return (
<Stack.Navigator
headerMode="screen"
screenOptions={{
headerShown: true,
headerBackTitleVisible: false,
headerLeft: () => <ActionBarImage />
}}
initialRouteName={Screens.CUSTOMER_REGISTRATION_HOME}>
<Stack.Screen
name={Screens.CAMERA}
options={{ title: '', headerShown: false }}
component={CameraScreen}
/>
<Stack.Screen
name={Screens.FACE_DETECTION_CAMERA}
options={{ title: '', headerShown: false }}
component={FaceDetectionCamera}
/>
<Stack.Screen
name={Screens.SHOW_IMAGE}
options={{ title: '' }}
component={ShowImage}
/>
<Stack.Screen
name={Screens.TYPE_OF_CUSTOMER}
options={{ title: 'CUSTOMER SIGN UP' }}
component={TypeOfCustomer}
/>
<Stack.Screen
name={Screens.ADD_SERIAL_NUMBER}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddSerialNumber}
/>
<Stack.Screen
name={Screens.ADD_CUSTOMER_DETAILS_1}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddCustomerDetails1}
/>
<Stack.Screen
name={Screens.ADD_CUSTOMER_DETAILS_2}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddCustomerDetails2}
/>
<Stack.Screen
name={Screens.ADD_CUSTOMER_PHOTOS}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddCustomerPhotos}
/>
<Stack.Screen
name={Screens.REGISTRATION_SAVED}
options={{ title: 'SAVED REGISTRATIONS' }}
component={RegistrationSavedSucces}
/>
<Stack.Screen
name={Screens.ADD_CUSTOMER_DETAILS_PREVIEW}
options={{ title: 'PREVIEW' }}
component={AddCustomerDetailsPreview}
/>
<Stack.Screen
name={Screens.SIGNATURE}
options={{ title: 'SIGNATURE' }}
component={Signature}
/>
<Stack.Screen
name={Screens.SAVED_REGISTRATIONS}
options={{ title: 'SAVED REGISTRATIONS' }}
component={SavedRegistrations}
/>
<Stack.Screen
name={Screens.CUSTOMER_REGISTRATION_HOME}
options={{ title: 'CUSTOMER' }}
component={CustomerRegistrationHome}
/>
<Stack.Screen
options={{ title: '' }}
name={Screens.CUSTOMER_SEARCH_BY_OTP}
component={CustomerSearchbyOTP}
/>
<Stack.Screen
options={{ title: '' }}
name={Screens.EDIT_CUSTOMER_DETAILS}
component={EditCustomerDeatils}
/>
<Stack.Screen
name={Screens.CUSTOMER_REGISTRATION_SUCCESSFUL}
options={{ title: '' }}
component={CustomerRegistrationSuccessful}
/>
<Stack.Screen
name={Screens.CUSTOMER_SEARCH}
options={{ title: 'Search Customer' }}
component={CustomerSearch}
/>
<Stack.Screen
name={Screens.ADD_CORPORATE_DETAILS_1}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddCorporateDetails1}
/>
<Stack.Screen
name={Screens.ADD_MINOR_DETAILS_1}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddMinorDetails1}
/>
<Stack.Screen
name={Screens.SIM_SWAP}
options={{ title: 'ADD NEW SIM' }}
component={SimSwap}
/>
<Stack.Screen
name={Screens.SIM_ADD}
options={{ title: '' }}
component={AddNewSIM}
/>
<Stack.Screen
name={Screens.ADD_NEW_SIM_DETAILS}
options={{ title: '' }}
component={AddNewSIMDetails}
/>
</Stack.Navigator>
)
}
在组件中设置用户提交详细信息时的状态,
useEffect(() => {
if(someState) {
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
}
},[someState])
我对此有点陌生。我需要阻止用户在提交详细信息后导航回上一页。我需要你的帮助。有没有一种方法可以阻止用户返回到堆栈中的特定屏幕。这是我的 Stack 的一个片段。
在 ADD_CUSTOMER_DETAILS_2 之后,一旦用户导航到 ADD_CUSTOMER_PHOTOS,我想阻止用户导航回 ADD_CUSTOMER_DETAILS_2
function AddCustomerStack() {
return (
<Stack.Navigator
headerMode="screen"
screenOptions={{
headerShown: true,
headerBackTitleVisible: false,
headerLeft: () => <ActionBarImage />
}}
initialRouteName={Screens.CUSTOMER_REGISTRATION_HOME}>
<Stack.Screen
name={Screens.CAMERA}
options={{ title: '', headerShown: false }}
component={CameraScreen}
/>
<Stack.Screen
name={Screens.FACE_DETECTION_CAMERA}
options={{ title: '', headerShown: false }}
component={FaceDetectionCamera}
/>
<Stack.Screen
name={Screens.SHOW_IMAGE}
options={{ title: '' }}
component={ShowImage}
/>
<Stack.Screen
name={Screens.TYPE_OF_CUSTOMER}
options={{ title: 'CUSTOMER SIGN UP' }}
component={TypeOfCustomer}
/>
<Stack.Screen
name={Screens.ADD_SERIAL_NUMBER}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddSerialNumber}
/>
<Stack.Screen
name={Screens.ADD_CUSTOMER_DETAILS_1}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddCustomerDetails1}
/>
<Stack.Screen
name={Screens.ADD_CUSTOMER_DETAILS_2}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddCustomerDetails2}
/>
<Stack.Screen
name={Screens.ADD_CUSTOMER_PHOTOS}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddCustomerPhotos}
/>
<Stack.Screen
name={Screens.REGISTRATION_SAVED}
options={{ title: 'SAVED REGISTRATIONS' }}
component={RegistrationSavedSucces}
/>
<Stack.Screen
name={Screens.ADD_CUSTOMER_DETAILS_PREVIEW}
options={{ title: 'PREVIEW' }}
component={AddCustomerDetailsPreview}
/>
<Stack.Screen
name={Screens.SIGNATURE}
options={{ title: 'SIGNATURE' }}
component={Signature}
/>
<Stack.Screen
name={Screens.SAVED_REGISTRATIONS}
options={{ title: 'SAVED REGISTRATIONS' }}
component={SavedRegistrations}
/>
<Stack.Screen
name={Screens.CUSTOMER_REGISTRATION_HOME}
options={{ title: 'CUSTOMER' }}
component={CustomerRegistrationHome}
/>
<Stack.Screen
options={{ title: '' }}
name={Screens.CUSTOMER_SEARCH_BY_OTP}
component={CustomerSearchbyOTP}
/>
<Stack.Screen
options={{ title: '' }}
name={Screens.EDIT_CUSTOMER_DETAILS}
component={EditCustomerDeatils}
/>
<Stack.Screen
name={Screens.CUSTOMER_REGISTRATION_SUCCESSFUL}
options={{ title: '' }}
component={CustomerRegistrationSuccessful}
/>
<Stack.Screen
name={Screens.CUSTOMER_SEARCH}
options={{ title: 'Search Customer' }}
component={CustomerSearch}
/>
<Stack.Screen
name={Screens.ADD_CORPORATE_DETAILS_1}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddCorporateDetails1}
/>
<Stack.Screen
name={Screens.ADD_MINOR_DETAILS_1}
options={{ title: 'CUSTOMER SIGN UP' }}
component={AddMinorDetails1}
/>
<Stack.Screen
name={Screens.SIM_SWAP}
options={{ title: 'ADD NEW SIM' }}
component={SimSwap}
/>
<Stack.Screen
name={Screens.SIM_ADD}
options={{ title: '' }}
component={AddNewSIM}
/>
<Stack.Screen
name={Screens.ADD_NEW_SIM_DETAILS}
options={{ title: '' }}
component={AddNewSIMDetails}
/>
</Stack.Navigator>
)
}
在组件中设置用户提交详细信息时的状态,
useEffect(() => {
if(someState) {
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
}
},[someState])