我有两个有条件渲染的屏幕。我希望在离开屏幕并返回后屏幕的状态保持不变。
例如,在下面的可重现代码中,当我位于
ScreenA
并滚动地图时,单击到 ScreenB
,然后返回到 ScreenA
,我希望地图仍位于我最初滚动的位置。然而,它再次呈现得像新的一样,擦除了之前的用户进度。
在导航到 ScreenB 和从 ScreenB 导航后,如何将 ScreenA 保持在用户所在的位置?
我尝试使用 useCallback 正如你所看到的,但没有运气。下面的链接将带您访问snack.expo.io,其中包含所有代码和准备就绪的模拟器。
代码也在这里
export default function App() {
const [screen, setScreen] = useState('A');
function navToA() {
setScreen('A');
}
function navToB() {
setScreen('B');
}
const RenderScreen = useCallback((props) => {
return <ScreenA />;
}, []);
return (
<SafeAreaView style={styles.container}>
{screen === 'A' && <RenderScreen />} // users progress is lost when moving to screenB and back
{screen === 'B' && <ScreenB />}
<TouchableOpacity onPress={() => navToA()} style={styles.buttonStyleA}>
<Text>A</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => navToB()} style={styles.buttonStyleB}>
<Text>B</Text>
</TouchableOpacity>
</SafeAreaView>
);
}
您正在使用条件渲染,因此每次在屏幕上显示组件时,都会对渲染树的已删除屏幕 B 做出反应并添加屏幕 A,反之亦然。
这里有两个选项,渲染两个组件并根据用户所在的屏幕更改它们的 Z 索引,这不是最好的解决方案,但它可以工作,或者使用反应导航并更改呈现这些组件的逻辑屏幕。
您可以在此处阅读有关您的问题的信息。 https://react.dev/learn/preserving-and-resetting-state#state-is-tied-to-a-position-in-the-tree