expo-router@2：在相同路线之间导航时，自定义选项会破坏动画

Question

我在使用自定义屏幕选项时遇到

expo-router@2

问题。当在相同的路线之间导航时就会出现问题，例如从

/[id]

到

/[id]

。

没有自定义屏幕选项/有自定义屏幕选项

/app/index.js

export default function Page() {
  const router = useRouter();

  return (
    <View>
      <TouchableOpacity
        onPress={() => router.push({
          pathname: "/[id]",
          params: { id: Math.round(Math.random() * 1000) },
        })}
      >
        <Text>Go inside</Text>
      </TouchableOpacity>
    </View>
  );
}

/应用程序/[id].js

export default function Page() {
  const router = useRouter();
  const { id } = useLocalSearchParams();

  return (
    <View>
      <TouchableOpacity
        onPress={() => router.push({
          pathname: "/[id]",
          params: { id: Math.round(Math.random() * 1000) },
        })}
      >
        <Text>Go deeper</Text>
      </TouchableOpacity>
      <View>
        <Text>{id}</Text>
      </View>
    </View>
  );
}

/app/_layout.js：

export default function Layout() {
  return (
    <Stack>
      {/* if you uncomment following tag it will break the default behavior: */}
      {/* <Stack.Screen
        name="[id]"
        options={{
          title: "title",
        }}
      /> */}
    </Stack>
  );
}

复制：我无法创建Expo Snack，因为它只允许为SDK<=48, but expo-router@2 is only available in SDK 49, so I put a minimal reproducible example in this repository创建Snack。

提前致谢！

Answer 1

我也遇到同样的问题，请问你解决了吗？