Le të supozojmë se keni 5 ekrane në aplikacionin tuaj celular dhe po përdorni navigimin reagues për t'i naviguar ato. Si mund të jetë më e qartë dhe më e lehtë për t'u kontrolluar rrjedha e rrjedhës ndërmjet këtyre ekraneve në rastet e lundrimit me butona fizikë si onBackPress në sistemin operativ Android?
Ose një pjesëmarrës i ri në projektin tuaj, si mund të kenë një pamje më të përgjithshme të ekraneve kryesore dhe flukseve kryesore të aplikacionit tuaj celular?
Imagjinoni që keni 5 ekrane më poshtë, duke dhënë 2 navigacion të veçantë, 1 për rrjedhën Auth, 2 për rrjedhën në shtëpi. Dhe keni përdorur navigimin në sirtar - React Navigation .
const routeAppConfiguration = {
[Routes.HOME]: {
Ekrani: Home,
opsionet e navigimit: ({ navigacion }) =› ({
kokë: null,
header majtas: null,
gjeste të aktivizuara: false,
}),
},
[Rrugët.NOTIFY_CENTER]: {
ekrani: NotifyCenter,
opsionet e navigimit: ({ navigacion }) =› ({
kokë: null,
}),
},
};
//ListScreen për Auth
const routeAuthConfiguration = {
[Routes.LOGIN]: {
ekrani: Hyr,
},
[Rrugët.REGJISTROHU]: {
ekrani: Regjistrohu,
},
[Rrugët.FORGOT_PASSWORD]: {
ekrani: Harrove fjalëkalimin,
},
};
Për hapin tjetër , krijo Stack Navigator për çdo navigim të rrjedhës .
const OnboardingStack = createStackNavigator(routeAppConfiguration, {
Emri fillestar iRrugës: Routes.HOME,
opsionet e navigimit: {
kokë: null,
},
});
const AuthStack = createStackNavigator(routeAuthConfiguration, {
fillestariRruga Emri: Routes.LOGIN,
opsionet e navigimit: {
kokë: null,
},
});
fillestariRouteName është një ekran i paracaktuar që do të hapet kur të shkoni në navigatorin e një rafte
Dhe hapi tjetër, krijoni një pirg për rrjedhën e të gjitha rafteve:
const RootStack = createAppContainer(
createSwitchNavigator(
{
Auth: {ekrani: AuthStack },
Inboarding: { ekran: OnboardingStack },
},
{
emri i rrugës fillestare: 'Auth',
opsionet e navigimit: {
kokë: null,
},
},
),
);
Dhe e fundit (nëse doni të përdorni navigimin e sirtarit):
const DrawerNavigation = krijoDrawerNavigator(
{
RootStack: RootStack,
},
{
Pozicioni i sirtarit: 'e drejtë',
Përbërësi i përmbajtjes: Slide Screen,
Gjerësia e sirtarit: gjerësia_plotë * 0.75,
DrawerOpenRoute: 'Sirtar i hapur',
drawerCloseRoute: 'DrawerClose',
//drawerToggleRoute: 'DrawerToggle',
},
);
eksportoni default createAppContainer(DrawerNavigation);
_navigationToHome() {
this.props.navigation.navigate(Routes.HOME);
}
Kthehu Prapa Midis StackNavigators
this.props.navigation.goBack();
navigimi i reagimit
StackNavigators: Navigoni dhe fshini rrugën e mëparshme.
navigateToLogin() {
const resetAction = NavigationActions.reset({
indeksi: 1,
veprime: [
NavigationActions.navigate({ Emri i rrugës: 'Ruter.HOME' }),
NavigationActions.navigate({ Emri i rrugës: 'Ruter.LOGIN' })
]
});
this.props.navigation.dispatch(resetAction);
}
çaktivizoni drerNavigator nga hapja me rrëshqitje në stackNavigators të vendosura
mund ta çaktivizoni sirtarin në çdo ekran, mjafton të shtoni:
opsionet e navigimit: {
drawerLockMode: 'i kyçur-mbyllur'
}
React Navigation : Butoni Back nuk shkon në skenën e mëparshme, por shkon në firstRouteName.
Gëzuar kodimin .~
