Всем привет! Подскажите кто сталкивался с подобной задачей. Необходимо реализовать Бэкграунд картинкой в верхней части экрана, а наверх наложить фон с градиентом таким образом, чтобы переход градиента был консистентным с картинкой. Так же при скролинге весь фон должен уезжать вверх (обычный скролл, т.е картинку вверху фиксировать не нужно) и на таком вот фоне с градиентом поверх всего рендерится основной контент. Я пробовал множество реализаций, но как-то к хорошему решению, как бы это выглядело на вебе, не получилось. ПРимерное решение было вот такое: https://paste.ubuntu.com/p/D5XBT6wXhT/ Но постоянная проблема с наслаиванием блоков. Быть может, кто-то сталкивался с подобной задачей? ВОт как это выглядет на вебе и как это должно выглядеть на RN (один в один) https://jsfiddle.net/Stafox/koh1Lajq/

спасибо за помощь, но кажется это невозможно

Я бы просто изначально картинку в пнг использовал, если я правильно понял, что должно получиться

Я бы просто изначально картинку в пнг использовал, если я правильно понял, что должно получиться

Всем привет! Подскажите кто сталкивался с подобной задачей. Необходимо реализовать Бэкграунд картинкой в верхней части экрана, а наверх наложить фон с градиентом таким образом, чтобы переход градиента был консистентным с картинкой. Так же при скролинге весь фон должен уезжать вверх (обычный скролл, т.е картинку вверху фиксировать не нужно) и на таком вот фоне с градиентом поверх всего рендерится основной контент. Я пробовал множество реализаций, но как-то к хорошему решению, как бы это выглядело на вебе, не получилось. ПРимерное решение было вот такое: https://paste.ubuntu.com/p/D5XBT6wXhT/ Но постоянная проблема с наслаиванием блоков. Быть может, кто-то сталкивался с подобной задачей? ВОт как это выглядет на вебе и как это должно выглядеть на RN (один в один) https://jsfiddle.net/Stafox/koh1Lajq/

а расскажите подробнее про то как фон должен уезжать

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

а если сделать так же как и в вашем же примере? с позишен абсолют

отлично, вот только на RN нету свойст градиента и backgroundImage. Есть компонент LinerGradient и отдельно Image и необходимо их друг на друга наложить, точнее на весь экран градиент, а картинка ложиться наверх и принимает фон градиента

позишен абсолют относительно родителя позиционируется

верно, но у меня скролл у контента, а не у самого верхнего родителя

ну зачем же так все буквально воспринимать 🙂 <View style={{ flex: 1, position: 'relative' }}> <Image style={{ position: 'absolute', left: 0, right: 0, top: 0 }} width={} height={} src={} /> <LinearGradient style={{ position: 'absolute', left: 0, right: 0, top: 50 }} colors={['rgba(1, 32, 80, 0.41)', 'rgba(1, 32, 80, 1)']} locations={[0, 1]}/> {children} </View>

а откуда вы взяли инфу про самого верхнего родителя?

если вы так ставите задачу, что нужно прям выше чем скролл вью по иерархии создавать, то можно конечно, но придется с Animated повозится и пробросить в скроллвью, чтобы на onScroll смещать картинку

Всем привет! Подскажите кто сталкивался с подобной задачей. Необходимо реализовать Бэкграунд картинкой в верхней части экрана, а наверх наложить фон с градиентом таким образом, чтобы переход градиента был консистентным с картинкой. Так же при скролинге весь фон должен уезжать вверх (обычный скролл, т.е картинку вверху фиксировать не нужно) и на таком вот фоне с градиентом поверх всего рендерится основной контент. Я пробовал множество реализаций, но как-то к хорошему решению, как бы это выглядело на вебе, не получилось. ПРимерное решение было вот такое: https://paste.ubuntu.com/p/D5XBT6wXhT/ Но постоянная проблема с наслаиванием блоков. Быть может, кто-то сталкивался с подобной задачей? ВОт как это выглядет на вебе и как это должно выглядеть на RN (один в один) https://jsfiddle.net/Stafox/koh1Lajq/

а что для скролла юзается?

Попробуй хотя бы flatlist юзать, там вроде как оптимизация есть

ничего, обычный scrollView а там я {data.map} делаю на запрос в data добавляю новые пикчуры и оно дорисовыет необходимые

array.map вообще практически никогда не рекомендую использовать в RN

Я что то такое делал с Animated и onScroll, важно элемент который должен двигаться спозиционировать абсолютно и координаты через translateY задавать

Подскажите новичку, как разместить кнопку по необходимым координатам, а не строго по центру и тд? Понимаю, что стили, но не могу найти определенные параметры для этого

ок, сейчас попробую

Можно подробнее?

1) Стили кнопки "marginTop: 100, marginLeft: 100". Относительно родителя координаты будут (100, 100) 2) Стиль контейнера (родительского компонента кнопки): "paddingTop: 100; paddingLeft: 100". https://cdn-images-1.medium.com/max/1200/1*_Q0vGWv0CTxyZhF8hl5AfA.png

Спасибо

я FlatList даже для маленьких массивов юзаю, мне так удобнее разбивать свои компоненты

Большие списки в RN - это проблема ( во всяком случаи мне приходилось искать разные решения для быстрой отдачи ) вместо array.map нужно использовать https://facebook.github.io/react-native/docs/flatlist либо <SectionList>. (если что-то сложнее) Они под капотом умеют много всего делать, в том числе и lazyLoad и pullToRefresh и много всего

надо было уточнить, что проблема не в самом map, а в том, что не стоит таким образом отрисовывать коллекции =)

Ещё вот такое пригодится, наверное: https://flexboxfroggy.com/

Попробуй хотя бы flatlist юзать, там вроде как оптимизация есть

мб тут есть гуру apollo? Есть компонент, который обернут в compose, и, соответственно, при его маунте происходит graphql-запрос, возвращающий сущность с одним id; В другом компоненте вызывается мутация этой сущности, но, в силу некоторой бизнес-логики, возвращается новая, со вторым id; Первый компонент при этом по прежнему слушает мутации сущности с первым id, как можно переключить его на второй? или чтобы при мутации обновилась первая сущность с подменой id..

модели одинаковые, разные только id и некоторые другие поля

спасибо, погляжу

Блеее, что-то не могу решить багу несколько дней уже. firebase отваливается в релиз моде, когда скачиваешь с testflight 🤔 в симуляторе все ок работает, даже хз куда смотреть. rm -rf node_modules rm -rf ios/Pods и установку заново делал в sentry с релиз сборки в итоге это: You attempted to use a firebase module that's not installed natively on your iOS project by calling firebase.messaging(). Ensure you have the required Firebase iOS SDK pod for this module included in your Podfile, in this instance confirm you've added "pod 'Firebase/Messaging'" to your Podfile See http://invertase.link/ios for full setup instructions.

Доброго. Может кто помочь?) Использую экспо. Внезапно ловлю We do not have some credentials for you. Есть сертификаты iOS Distribution и пушей, но генерены не мной, паролей к ним нет.. для каждого разраба должен быть сгенерен свой набор сертификатов? или выбивать из другого разраба пароли?)

Блеее, что-то не могу решить багу несколько дней уже. firebase отваливается в релиз моде, когда скачиваешь с testflight 🤔 в симуляторе все ок работает, даже хз куда смотреть. rm -rf node_modules rm -rf ios/Pods и установку заново делал в sentry с релиз сборки в итоге это: You attempted to use a firebase module that's not installed natively on your iOS project by calling firebase.messaging(). Ensure you have the required Firebase iOS SDK pod for this module included in your Podfile, in this instance confirm you've added "pod 'Firebase/Messaging'" to your Podfile See http://invertase.link/ios for full setup instructions.

"firebase отваливается в релиз моде, когда скачиваешь с testflight", смотреть соответственно кто и как делает билд, который попадает в тестфлайт. Сделать те же действия локально, запустить, проверить, etc

🤔билды делаю сам, в ручную в xcode. react-native run-ios --simulator="iPhone 7" --configuration Release так тоже работает. А на девайсе когда скачиваю, захожу даже в настрйке, там тупо нет notifications

отпишусь:) все же надеюсь победить эту багу.