milosciganovic / ByteoutDemo

0 stars 0 forks source link

Add collapsable header #19

Open mi5ha opened 4 years ago

mi5ha commented 4 years ago
milosciganovic commented 4 years ago

Instalacija

npm i react-navigation-collapsible ili yarn add react-navigation-collapsible Nema nikakvih dodatnih stvari za instalaciju

WARNING

Non-serializable values were found in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.

Ovaj warning mi se javlja, pogledao sam kod njih na issuese, stoji kao BUG I idalje je otvoren.

Imali su podrsku i za hideTabBar ali je ugasena zbog nekih bagova na androidu, medjutim u issueses i dalje stoji kao OPEN, pa mozda vremenom dodaju i tu stvar

The Callapsible Tab-navigator is no longer supported due to the Android bug from react-native.

Importovanje

Sve kao na dokumentaciji, potrebno je da u navigatoru importuje: import {createCollapsibleStack,} from 'react-navigation-collapsible'; Zatim se ceo screen koji ocemo da ima ovu opciju wrappuje: { createCollapsibleStack( <Stack.Screen initialParams={{ articleId: 42 }} options={({ route }) => ({headerStyle: { backgroundColor: 'green' }, title:Article ID: ${route?.params?.articleId}` })} name="ArticleScreen" component={ArticleScreen} />, { collapsedColor: 'red' / Optional /, useNativeDriver: true, key: "ArticleScreen", }

                 )
           }`

Opcije koje mozemo da ubacimo su poprilicno siromasne. Sem ove tri collapsedColor, useNativeDriver, key ima i jos jedna opcija CollapsedHeaderBackground, ali nju nisam bas lepo skapirao.

VAZNO: Ako se u Stack.Screen u options be ubaci backgroundColor headerStyle: { backgroundColor: 'green' } Onda ce header background automatski uzeti vrednost koju smo ubacili u collapsedColor

Da ne prekucavam dokumentaciju, posto sam koristio isto kao na dokumentaciji napisacu samo dve stvari za sada

Na Sticky UI potrebno je u style staviti top: containerPaddingTop (property iz useCollapsibleStack()) koji ce gurnuti STACK UI tacno ispod hedera u suprotnom ode iza.

Probao sam da ubacim 2 CollapsibleStackSub-a u jednom screen-u malo se pogavo android, moram to malo vise da ispitam, ali mislim da to nije predvidjeno da se radi.

mi5ha commented 4 years ago

Super! Pretvoricu ovo u notebook. Jesi probao sva tri slucaja da rade kako treba? Ubacujes code il je sve kao i na siteu pa da uzmem to? Nema nikakvih tvojih twekova da bude bolje?

mi5ha commented 4 years ago

Otvoricu ovo da stoji dok ne kopiram ove tvoje zakljucke u notebooks

milosciganovic commented 4 years ago

E zapravo da ja sad krenuo da otvaram novu karticu za jednu stvar. Ovde sam ubacio samo sticki UI i kod je kao njihov, za obican je isto samo bez sticki ui dela ali ima problem sa trecom opcijom:

Sub Header (e.g Search Bar)

To sam totalno zanemario, ali meni se ponasao isto kao sticki UI, umesto da bezi gore on ostaje, moram da istrazim detaljnije sve to, ali kolko sam video mislim da je neko vec otvarao karticu za to na njihovom git-u tipa da radi samo sa listom ili tako nesto.

Ali neka stoji ovo otvoreno dok ne istrazim sve, cisto sam ubacio kod da odradim ove ostale taskove.

mi5ha commented 4 years ago

mozda se neko pozalio da je to bug?

milosciganovic commented 4 years ago

ZA LIST VIEW: (ovo su oni zakomentarisali samo u kodu pa moze da se propusti)

potrebno je promeniti import u navigatoru na createCollapsibleStackSub, i onda wrappovati screen u createCollapsibleStackSub(...). Posle sve u screen-u po dokumentaciji

NE RADI SA SCROLLVIEW

Ukoliko se wrapuje u scrollview, ne nestaje kako treba, vec nestaje zbog samog scroll-a i ne pojavljuje se opet. U sustini to mi je i logicno

Ukoliko se stavi scrollView iznad kao sto je slucaj sa listom, samo stoji zakucan na jednom mestu