Экраны на мгновение перекрываются при использовании router.push() из Expo-Router ⇐ Javascript

[Anonymous]

Я пытаюсь перемещаться между двумя страницами, используя метод router.push() Expo Router. Мой тип навигатора — стек. Хотя этот метод и перевел меня на новую страницу, между старой и новой страницами происходит кратковременное перекрытие. Кажется, что старая страница не исчезает, пока не появится новая анимация, как вы можете видеть на следующем изображении:
Как вы можете видеть на рисунке, появляется правильная форма. справа и толкает к старой форме слева. Старая форма останется там на мгновение, прежде чем исчезнет.
Это мой код:
layout.tsx
< pre class="lang-js Prettyprint-override">

Код: Выделить всё

import { View, Image, KeyboardAvoidingView, StyleSheet, Platform } from "react-native";
import React, { useState, useEffect } from "react";
import { LinearGradient } from 'expo-linear-gradient'; // Use expo-linear-gradient
import { useAppContext } from "@/Builder/Context/RootContext";
import { orientation } from "@/Builder/Type/Enum";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";

export default function AuthenticationStackRootLayout() {
const appContext = useAppContext();

console.log("Current Orientation: " + appContext.deviceInitialState.orientation)

const styles = StyleSheet.create({
rootAuthenticationView: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: 1,
},
backgroundContainer: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: 0,
},
imagePortrait: {
height: "100%",
aspectRatio: 3 / 2,
flexShrink: 1,
left: -500
},
imageLandscape: {
width: "100%",
flexShrink: 1
},
formContainer: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: 2,
elevation: 2
},
linearGradient: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
zIndex: 1,
elevation: 1
},
})

return (













)
}

index.tsx

Код: Выделить всё

import { Redirect } from "expo-router";

export default function AuthenticationIndex() {
return 
}
< /code>
страница входа в систему (исходная страница) < /p>
import React, { useState } from "react";
import { View, Image, Text, Pressable, StyleSheet, Keyboard, } from "react-native";
import { LogInForm } from "@/Builder/Component/Form/LogInForm";

export default function LogInPage() {
const [credentials, setCredentials] = useState(
{
username: "",
password: ""
}
)
const [fieldFocusState, setFieldFocusState] = useState(
{
username: false,
password: false
}
)

const styles = StyleSheet.create({
pressableContainer: {
position: "absolute",
top: 0,
right: 0,
left: 0,
bottom: 0,
flexShrink: 0,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 32,
},
});

return (
 {
Keyboard.dismiss();
const updatedFocusState = { ...fieldFocusState };
for (const key of Object.keys(updatedFocusState)){
updatedFocusState[key] = false
}
setFieldFocusState(updatedFocusState)
}}
>



Vui Lòng Điền Thông Tin Đăng Nhập




)
}

Страница «Забыть мой пароль» (страница назначения)

Код: Выделить всё

import React, { useState } from "react";
import { View, Image, Text, Pressable, StyleSheet, Keyboard, } from "react-native";
import { ForgetPasswordForm } from "@/Builder/Component/Form/ForgetPasswordForm";

export default function ForgetPasswordPage() {
const [forgetPasswordForm, setForgetPasswordForm] = useState({
userName: "",
businessPhoneNumber: ""
})
const [fieldFocusState, setFieldFocusState] = useState({
userName: false,
businessPhoneNunber: false,
})

const styles = StyleSheet.create({
pressableContainer: {
position: "absolute",
top: 0,
right: 0,
left: 0,
bottom: 0,
flexShrink: 0,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 32
},
});

return (
  {
Keyboard.dismiss();
const updatedFocusState = { ...fieldFocusState };
for (const key of Object.keys(updatedFocusState)) {
updatedFocusState[key] = false
}
setFieldFocusState(updatedFocusState)
}}>




Vui Lòng Điền Tên Đăng Nhập và Số Điện Thoại Công Ty




)
}

Я попробовал изменить стиль анимации на затухание, что могло бы несколько скрыть перекрытие на Android. Проблема по-прежнему заметна на iOS.


Подробнее здесь: https://stackoverflow.com/questions/793 ... xpo-router