我可以阻止用户返回 React Navigation 中的上一页吗？

Question

我对此有点陌生。提交详细信息后，我需要阻止用户导航回上一页。我需要你的帮助。有没有办法可以防止用户返回到堆栈中的特定屏幕。这是我的 Stack 的 sn-p。

在 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>
  )
}

Answer 1

在组件中设置用户提交详细信息时的状态，

useEffect(() => {
if(someState) {
  history.pushState(null, null, location.href);
  window.onpopstate = function(event) {
    history.go(1);
  };
}
},[someState])