Всем привет! Как сделать, чтобы при скролле хедер был белым/прозрачным,

Question

React Native — русскоговорящее сообщество

Всем привет! Как сделать, чтобы при скролле хедер был белым/прозрачным,

а после превращался в обычный хедер? Учитывая что это почти во всех приложениях так, ощущение, что это какой-то стандартный паттерн, но в expo ничего подобного пока не получилось найти из коробки

#mobile #programming #reactnative #russian

0

05.11.2023

17 ответов

91 просмотр

عيون زرقاء Автор вопроса

Daniil S🇺🇦
https://reactnavigation.org/docs/native-stack-navi...

Да, но тут анимация почему-то другая и в целом работает как-то иначе, не так как в других приложениях

0

05.11.2023

Daniil S🇺🇦

عيون زرقاء
Да, но тут анимация почему-то другая и в целом раб...

native stack у него анимация стандартная как в нативных ios приложениях, не совсем понимаю чем он вас не устраивает, по описанию - это именно то, что нужно.

0

05.11.2023

عيون زرقاء Автор вопроса

Daniil S🇺🇦
native stack у него анимация стандартная как в нат...

Немного отличается от ватсапа, в ватсапе он вместе со скроллом уезжает медленно если скролить, а тут он просто с какого-то брейкпоинта улетает, если скролить медленно

0

05.11.2023

Daniil S🇺🇦

عيون زرقاء
Да, но тут анимация почему-то другая и в целом раб...

сравнивайте с приложениями эпл на айфоне, они по гайдам сделаны, если есть что-то кастомное, что вы увидели, то скорее всего нужно и делать будет кастом

0

05.11.2023

Daniil S🇺🇦

عيون زرقاء
Немного отличается от ватсапа, в ватсапе он вместе...

странно, может конфигурации не хватает нужной нейтив стаку ?

0

05.11.2023

عيون زرقاء Автор вопроса

Daniil S🇺🇦
странно, может конфигурации не хватает нужной нейт...

Скорее всего, но какой именно - пока загадка, сижу пытаюсь найти

0

05.11.2023

عيون زرقاء Автор вопроса

Daniil S🇺🇦
сравнивайте с приложениями эпл на айфоне, они по г...

Также я как-то не совсем понимаю, как мне подружить tabs и stack, всегда получается, что либо у стека не то название экрана, либо у табов что-то левое

0

05.11.2023

Daniil S🇺🇦

عيون زرقاء
Также я как-то не совсем понимаю, как мне подружит...

вот эти параметры попробуйте ``` headerLargeTitle: headerLargeTitle, headerTransparent: isIos, headerBlurEffect: colorScheme, headerRight: () => rightComponent, headerLargeTitleStyle: { fontSize: titleSize, fontFamily: Fonts.regular, }, ```

0

05.11.2023

عيون زرقاء Автор вопроса

Daniil S🇺🇦
вот эти параметры попробуйте ``` headerLargeTitle:...

Неа, не играет роли

0

05.11.2023

Daniil S🇺🇦

عيون زرقاء
Также я как-то не совсем понимаю, как мне подружит...

у таб навигатора можно указать вот так, все хорошо дружит ``` screenOptions={({ route }) => ({ tabBarActiveTintColor: Colors.purpleLight, tabBarInactiveTintColor: Colors.purpleDark, headerShown: false, tabBarStyle: isIos ? { backgroundColor: 'transparent', borderTopWidth: 0, position: 'absolute', } : null, ```

0

05.11.2023

عيون زرقاء Автор вопроса

Вот сравнение анимаций у меня и у Тинькова

0

05.11.2023

Daniil S🇺🇦

عيون زرقاء
Вот сравнение анимаций у меня и у Тинькова

дёрганная какая-то получилось, не сталкивался с таким..., если у списка который под аппбаром должен быть contentInsetAdjustmentBehaviour поменять?

0

05.11.2023

Daniil S🇺🇦

عيون زرقاء
Вот сравнение анимаций у меня и у Тинькова

попробуйте списку с тектом абсолют убрать позицию и положить его во вью с флексом 1 под аппбар, и самому списку бихевиар поменять, должно работать хорошо в теории

0

05.11.2023

عيون زرقاء Автор вопроса

Daniil S🇺🇦
дёрганная какая-то получилось, не сталкивался с та...

Проблема решилась погружением stack навигатора внутрь tabs, как-то само собой) единственно, что теперь у меня на каждую страницу в tapbar отдельный stack layout, не знаю насколько это правильный паттерн

0

05.11.2023

Daniil S🇺🇦

عيون زرقاء
Проблема решилась погружением stack навигатора вну...

в аппстор так реализованно, это нормально. просто если нужно прям поверх всего экран показать, нужно будет обратиться к рутовому навигатору

0

05.11.2023

whyamsx

عيون زرقاء
Неа, не играет роли

чтобы работало важно понимать, что для этой фичи нужен createNativeStackNavigator из @react-navigation/native-stack, вместо createStackNavigator (из @react-navigation/stack)

0

05.11.2023

Daniil S🇺🇦 · Accepted Answer

Daniil S🇺🇦

https://reactnavigation.org/docs/native-stack-navigator

0

05.11.2023

169 похожих чатов

Всем привет! Как сделать, чтобы при скролле хедер был белым/прозрачным,

17 ответов

Похожие вопросы