触发移动浏览器返回按钮?

Question

我有一个网站，在父路由中呈现子路由，添加样式和其他细节布尔值状态被传递到outlook，以便子路由从屏幕的左侧滑动进来，然后进行渲染。

以前我在正确渲染子路由时遇到了另一个问题。当时我手动刷新pin-details(child-route)，页面不会被渲染，只是因为布尔状态是null，这是从父路由传递下来的。

现在我已经修复了手动刷新问题，但遇到了一个类似的问题，如果我按下后退按钮(默认的移动应用程序栏按钮)注意:-不是浏览器的后退按钮。布尔状态保持为真，浏览器会导航到上一个页面，但不会因为这个状态而全部显示。

我目前的方法是针对浏览器后退按钮，并设置布尔状态设置为false一旦按下它。

我不太确定如何实现这个或从哪里开始。一定要告诉我这个方法好不好!

不想通过添加大量代码使问题混乱，现在我分享我的网站，检查它。

Feed.jsx

const [renderChildren, setRenderChildren] = useState(false);

{/*Pin layout*/}
<section>
{feed_data.map((item, index) => (
<Pins pin={item} setRenderChildren={setRenderChildren}/> {/* We can manipulate the state from the child route. */}
))}
</section>

{/*Loading the PinDetails section*/}
<section
className={`${renderChildren ? "left-0" : "left-full"} fixed top-0 bg-white w-full z-30 transition-all h-full overflow-y-auto`}>
<Outlet context={[renderChildren, setRenderChildren]}/>
</section>

我沙箱

Answer 1

要禁用后退按钮并阻止用户返回页面，

在你的javascript(App.js)。

import React, {Component, useEffect} from 'react';
useEffect(() => {
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
return () => backHandler.remove()
}

你也可以检查这个useEffect是如何工作的。

另外

要禁用屏幕滑动，请将此添加到您的身份验证主屏幕中。

<AuthStack.Screen
name= //Name of main app(ex:"Home")
component= //Name of main component(ex:{Home})
options={{ gestureEnabled:false }}
/>

或者在remove

之前使用

React.useEffect(() =>
navigation.addListener('beforeRemove',(e) => {
e.preventDefault();
)
}
);

不要忘记importfrom'react'.