expo-router@2：自定义选项导致同路由导航动画异常

在使用expo-router@2时，遇到一个问题：当给动态路由/[id]设置自定义屏幕选项后，在相同路由模板（从/[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>
  );
}

/app/[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>
      {/* 取消注释以下代码后，默认导航行为会被破坏： */}
      {/* <Stack.Screen
        name="[id]"
        options={{
          title: "title",
        }}
      /> */}
    </Stack>
  );
}

复现方式 #

由于Expo Snack仅支持SDK<=48，而expo-router@2仅在SDK 49中可用，无法创建在线Snack示例，已准备好最小可复现的本地示例仓库。

内容的提问来源于stack exchange，提问作者Nikolay Solovyov