Open mi5ha opened 4 years ago
npm i react-navigation-collapsible
ili yarn add react-navigation-collapsible
Nema nikakvih dodatnih stvari za instalaciju
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.
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.
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?
Otvoricu ovo da stoji dok ne kopiram ove tvoje zakljucke u notebooks
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.
mozda se neko pozalio da je to bug?
potrebno je promeniti import u navigatoru na createCollapsibleStackSub, i onda wrappovati screen u createCollapsibleStackSub(...). Posle sve u screen-u po dokumentaciji
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