Pasek boczny w React Native z reaktywną nawigacją


Używam
react-navigation
w
React Native
i 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
,
BScreen
i
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
AScreen
będzie na górze, ponieważ DrawerNavigator jest zagnieżdżony w
A
.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Potrzebowałem tej samej funkcjonalności, którą opisujesz, i udało mi się ją uruchomić z nawigacją React. Zasadniczo potrzebowałem całkowicie niestandardowej szuflady (paska bocznego).
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!

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się