web-dev-qa-db-fra.com

React tiroir de navigation V5

J'utilise la version 5 de react-navigation. J'ai la navigation par onglets et la navigation dans les tiroirs.

J'essaye d'ajouter une icône dans mon en-tête pour ouvrir/fermer le tiroir:

voici mon en-tête droit personnalisé pour basculer le tiroir:

const HeaderRight = ({ navigation }) => {   
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
        onPress={ () =>{ navigation.toggleDrawer()}}>  //here is the problem
          <Image source={require('./assets/images/icons/drawer.png')}/>
        </TouchableOpacity>
      </View>
    );}

c'est mon navigateur d'onglets:

const Tab = createBottomTabNavigator();
function AppTab() {
  return (
     <Tab.Navigator>         
        <Tab.Screen name="Category" component={Category} />    
        <Tab.Screen name="Home" component={Home}/>
      </Tab.Navigator>
   );}

navigateur de tiroirs:

    const Drawer = createDrawerNavigator();  
    function App() {
      return (    
          <Drawer.Navigator>
            <Drawer.Screen name="AppTab" component={AppTab} />
            <Drawer.Screen name="Notifications" component={NotificationsScreen} />
          </Drawer.Navigator>  
      );}

et mon navigateur de pile pour mélanger tous les thèmes:

const Stack = createStackNavigator();
  export default function MyStack() {
  return (
    <NavigationContainer>
    <Stack.Navigator
    headerMode="screen"
     screenOptions={{
          headerRight: ({ navigation }) => (<HeaderRight navigation={navigation} />
        ),}} >
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
    </NavigationContainer>
  );
}

lorsque j'appuie sur l'icône d'en-tête droite enter image description here

ce qui me manque ici? les documents n'étaient pas vraiment utiles

remarque: j'ai également essayé d'utiliser dispatch mais cela n'a pas fonctionné:

navigation.dispatch (DrawerActions.toggleDrawer ())

package.json: 

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "Android": "react-native run-Android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.8.0",
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/bottom-tabs": "^5.0.5",
    "@react-navigation/drawer": "^5.0.5",
    "@react-navigation/native": "^5.0.5",
    "@react-navigation/stack": "^5.0.5",
    "moment": "^2.24.0",
    "randomcolor": "^0.5.4",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-base64": "0.0.2",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-image-slider": "^2.0.3",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.0.0-beta.4",
    "react-native-woocommerce-api": "^1.0.12"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}
react-nativereact-navigationreact-native-navigationreact-navigation-v5
2
nfn

Au lieu de toggleDrawer () utilisez openDrawer ()

ÉTAPES 

import { DrawerActions } from '@react-navigation/native';

navigation.dispatch(DrawerActions.openDrawer());

Si la fonction ci-dessus ne fonctionne pas, essayez ceci:

this.props.navigation.openDrawer()

CODE DE MISE À JOUR

const HeaderRight = ({ navigation }) => {
  return (
    <View style={{ flexDirection: "row" }}>
      <TouchableOpacity
        onPress={() => {
          navigation.dispatch(DrawerActions.openDrawer());
        }}
      >
        <Image source={require("./assets/images/icons/drawer.png")} />
      </TouchableOpacity>
    </View>
  );
};

Assurez-vous d'avoir importé le package avant d'utiliser

1
Akila Devinda

c'est du travail pour moi!

        headerRight: () => (
          <HeaderButtons HeaderButtonComponent={HeaderButton}> // this is a cutom button
    <Item
      title="Favorite"
      iconName="ios-menu"
      onPress={() => {navigation.navigation.toggleDrawer() }}
    />
  </HeaderButtons>
        ),
0
amine

si this.props.navigation.openDrawer() ne fonctionne pas, vous pouvez essayer useNavigation.

import { useNavigation } from '@react-navigation/native';

dans votre en-tête function() ajouter

const navigation = useNavigation();

et ajoutez navigation.openDrawer() à onPress

0
DomuHarahap