web-dev-qa-db-fra.com

En-tête pour DrawerNavigation avec React-Navigation

Je suis sur ReactNative et j'utilise npm base native et react-navigation.

Je l'ai eu et ma question est de savoir comment avoir un en-tête, jusqu'au bouton "Accueil", j'ai regardé la documentation de react-navigation mais ce n'est pas vraiment effacé.

https://github.com/react-community/react-navigation/blob/master/docs/api/navigators/DrawerNavigator.md

enter image description here

Comme ça (l'image est fixe, c'est juste pour mettre un logo ici)

enter image description here

javascriptreact-nativenavigation-drawerreact-native-androidreact-native-ios
11
Erased

Vous pouvez implémenter un composant de contenu personnalisé pour le tiroir. Là, vous pouvez également simplement rendre les éléments de navigation à l'aide de DrawerItems. Par exemple:

import React from 'react'
import { Text, View } from 'react-native'
import { DrawerItems, DrawerNavigation } from 'react-navigation'

const DrawerContent = (props) => (
  <View>
    <View
      style={{
        backgroundColor: '#f50057',
        height: 140,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ color: 'white', fontSize: 30 }}>
        Header
      </Text>
    </View>
    <DrawerItems {...props} />
  </View>
)

const Navigation = DrawerNavigator({
  // ... your screens
}, {
  // define customComponent here
  contentComponent: DrawerContent,
})
15
madox2

Pour la navigation dans les tiroirs, vous pouvez ajouter vos propres en-tête et pied de page et créer vos propres styles avec contentComponent Config:
Première import { DrawerItems, DrawerNavigation } from 'react-navigation' Ensuite

En-tête avant DrawerItems:

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>.

Header Before DrawerItems

Pied de page après DrawerItems:

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>.

3
Sedric Heidarizarei

le navigateur imbriqué devrait ressembler à ceci:

const Router = StackNavigator({
    Home: {screen: HomeScreen},
    Test: {screen: TestScreen}
}, {
    navigationOptions: {
        headerStyle: {backgroundColor: '#2980b9'},
        headerTintColor: '#fff'
    }
});

const Drawer = DrawerNavigator({
    App: {screen: Router}
});

pour ui:

1) https://github.com/GeekyAnts/native-base-react-navigation-stack-navigator/blob/master/src/SideBar/SideBar.js

2) https://github.com/GeekyAnts/native-base-react-navigation-stack-navigator/blob/master/src/HomeScreen/index.js

2
Batuhan Akkaya

Vous pouvez y parvenir en utilisant contentComponent dans la configuration de navigation des tiroirs. Deux façons de procéder en fonction du niveau de configuration requis:

Méthode 1.

DrawerItems de react-navigation (gère la navigation seule) -

import {DrawerItems, DrawerNavigation} from 'react-navigation';
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: (props) =>
<View style={{flex: 1}}>
<Text>Header</Text>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</View>
});

Cela crée un en-tête fixe avec une vue de défilement pour les éléments de menu en dessous.

Méthode 2.

Création de votre propre composant personnalisé -

import { DrawerNavigation } from 'react-navigation'
export default DrawerNavigator({
// ... your screens
}, {
// define customComponent here
contentComponent: props => <SideMenu {...props}>
});

Ici SideMenu est votre propre composant à afficher dans le tiroir. Vous pouvez utiliser react-navigation NavigationActions.navigate (écran) pour gérer le routage sur onPress des éléments de menu.

Pour une explication plus détaillée sur la deuxième méthode https://medium.com/@kakul.gupta009/custom-drawer-using-react-navigation-80abbab489f7

2
Kakul Gupta