Таким образом, требование аналогично тому, как пользователь перемещается от страницы А (текущая) к странице В (следующая), когда оба экрана перемещаются (влево), как две карты, хранящиеся рядом. Страница-правый край, приклеенный к левому краю страницы-B. И в обратном направлении обе страницы движутся вправо. Это было просто и достигнуто с помощью cardStyleInterpolator.
transform: [
{
translateX: current.progress.interpolate({
inputRange: [0, 1],
outputRange: [layouts.screen.width, 0],
}),
},
{
translateX: next
? next.progress.interpolate({
inputRange: [0, 1],
outputRange: [0, -layouts.screen.width],
})
: 1,
},
],
Я также хочу анимировать содержимое страницы во время навигации. то есть у меня есть 4-5 View элементов, показывающих различные данные на странице-A и еще 4-5 View элементов на странице-B. Во время навигации я хочу, чтобы элементы слайдов Page-A были слева, а мудрые элементы слайдов Page-B - слева. Когда пользователь нажимает кнопку, чтобы перейти на следующую страницу, сначала начинают перемещаться элементы, а затем Страница-A. А на странице B страница впереди карточек.
Я пытался создать скриншот, когда страница наполовину анимирована. Пунктирная линия - видимая область (экран)
Таким образом, вопрос здесь заключается в том, должен ли я использовать функцию для запуска анимации текущих (Page-A) элементов экрана, затем запускать навигацию и onFocus или componentDidmount следующего экрана анимировать элементы Page-B. Я не считаю этот подход эффективным и утомительным, поскольку мне приходится обрабатывать каждую навигацию через функцию. Есть ли лучший способ, предоставляемый React-navigation, который дает лучший контроль над этим переходом навигации. Я знаю, что в новой версии React-navigation используется Reanimated, поэтому у меня большие надежды. Есть ли что-то в V5 React-навигации?
