Pasek boczny w React Native z reaktywną nawigacją
Używam
react-navigationw
React Nativei chcę utworzyć menu boczne, które otwiera się jako nakładka od lewej do prawej i wypełnia około 80-90% szerokości .
Bez reaktywnej nawigacji jest to możliwe w przypadku pakietów takich jak
react-native-side-bar, ale zastanawiam się, czy mogę uzyskać dokładnie taką samą funkcjonalność z DrawerNavigator.
Ale wygląda na to, że DrawerNavigator ma przyciski menu. Czy nie można samodzielnie dostosować nakładki?
Edytować
>
Rozwiązanie 1
>
Jednym ze sposobów byłoby użycie
const MyStackNavigator = StackNavigator({
A: { screen: AScreen },
B: { screen: BScreen },
C: { screen: CScreen }
});const RootNavigator = DrawerNavigator({
A: { screen: MyStackNavigator },
}, {
// set content of side bar
contentComponent: (props) => <Sidebar/>
});ale wtedy będzie można przeciągnąć i upuścić do pola ze wszystkich ekranów
AScreen,
BScreeni
CScreen, podczas gdy ja chcę, żeby tam było tylko dla
AScreen, ponieważ StackNavigator jest zagnieżdżony w DrawerNavigator.
Rozwiązanie 2
>
Innym rozwiązaniem byłoby użycie
const MyDrawerNavigator = DrawerNavigator({
A: { screen: AScreen },
}, {
// set content of side bar
contentComponent: (props) => <Sidebar/>
});const RootNavigator = StackNavigator({
A: { screen: MyDrawerNavigator },
B: { screen: BScreen },
C: { screen: CScreen }
});ale wtedy nagłówek
AScreenbędzie na górze, ponieważ DrawerNavigator jest zagnieżdżony w
A.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
1 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
To jest moja konfiguracja nawigacji:
const MainNavigator = DrawerNavigator({Home: {
screen: StackNavigator({
Search: {
screen: SearchScreen
},
Result: {
screen: ResultScreen
}
})
},
Saved: {
screen: StackNavigator({
SavedStack: {
screen: SavedWordsScreen
}
})
},
About: {
screen: StackNavigator({
AboutStack: {
screen: AboutScreen
}
})
}
},{
contentComponent: props => (<Drawer navigation={props.navigation} drawerProps={{...props}}/>)
});
Jak widać, utworzyłem komponent szuflady, który zawiera moją niestandardową zawartość szuflady. Oto podstawowa konfiguracja tego komponentu:
import React, { Component } from 'react';import { ScrollView, View, Text } from 'react-native';
import { Button } from 'react-native-elements';class Drawer extends Component {
render() {
return ( <View>
<Button title="Search" onPress={() => this.props.navigation.navigate('Home')}/>
<Button title="Saved" onPress={() => this.props.navigation.navigate('Saved')}/>
<Button title="About" onPress={() => this.props.navigation.navigate('About')}/>
</View>
);
}
}
Mam nadzieję że to pomoże. Uprościłem niektóre części kodu, aby w zasadzie pokazać odpowiednie bity, więc jeśli masz dodatkowe pytania, po prostu zapytaj!