Expo Router - 推送新屏幕时保留屏幕状态

Question

我正在 React Native 中使用 Expo Router。我注意到当我使用 router.back() 时，前一个屏幕没有保持旧状态，它只是重新渲染。

示例：

export default ScreenA = () => {

  useEffect(() => {
    // This is executed again when going back.
  }, [])

  return <Link href="screen-b">Screen B</Link>

}

export default ScreenB = () => {

  const router = useRouter();
  return <Pressable onPress={() => router.back()}>Screen A</Pressable>

}

这个问题有什么解决办法吗？ 我考虑过将状态的某些部分移至 redux，但有没有更简单的方法？我应该转向 React Navigation 吗？

Answer 1

请查看我在 github 问题中的评论： https://github.com/expo/router/issues/460#issuecomment-1973959243

我认为解决办法是： 在您的 _layout 中，将

Slot

替换为

Tabs

，如下所示。

import { Link, Slot, Stack } from 'expo-router'
import { Tabs } from 'expo-router/tabs'

                  {/* <Slot /> */}
                  {/* <Stack screenOptions={{ headerShown: false }} /> */}
                 <Tabs
                    screenOptions={({ route }) => ({
                      headerShown: false,
                      tabBarStyle: {
                        // display: route.name === 'example' ? 'none' : 'flex',
                        display: 'none',
                      },
                    })}
                  />

结果将类似于使用反应导航的

Tab Navigation

。 在选项卡导航中，它会再次显示路线（如果之前已定位），而无需重新加载/重新渲染。 它将使用该路线之前渲染的版本。

不同路线渲染方法的比较：

• Slot

  始终重新加载路线。

• Stack

  可以在不重新加载的情况下显示，但是，这只发生在某些特定情况下，当前位于基于 LILO 规则的堆栈中的路由。
• 最后，我们可以使用

  Tabs

  但只需隐藏标题和选项卡导航器菜单。这将始终使用该路线之前渲染的版本。切勿重新加载。