Discussion :

[hmscompagnie]

Bonjour,

Je cherche à combiner stack, Tab & Drawer Navigations en React Native. Je me suis inspiré de ce tuto.

Je me retrouve avec une superposition des champs titres :


Mon stacknavigator :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
 
import Commands from "../screens/Commands";
import Status from "../screens/Status";
import Statistics from "../screens/Statistics";
import Settings from "../screens/Settings";
import Support from "../screens/Support";
 
 
const Stack = createStackNavigator();
 
const MainStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Commands" component={Commands} />
      <Stack.Screen name="Status" component={Status} />
      <Stack.Screen name="Statistics" component={Statistics} />
      <Stack.Screen name="Settings" component={Settings} />
      <Stack.Screen name="Support" component={Support} />
 
    </Stack.Navigator>
  );
}
 
export { MainStackNavigator };

Mon tabnavigator :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Settings from '../screens/Settings';
import Statistics from '../screens/Statistics';
import Status from '../screens/Status';
import Support from '../screens/Support';
 
import { MainStackNavigator, ContactStackNavigator } from "./StackNavigator";
 
const Tab = createBottomTabNavigator();
 
const BottomTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Commands" component={MainStackNavigator} />
      <Tab.Screen name="Status" component={Status} />
      <Tab.Screen name="Statistics" component={Statistics} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};
 
export default BottomTabNavigator;

Mon drawernavigator :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
import React from "react";
 
import { createDrawerNavigator } from "@react-navigation/drawer";
import { ContactStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";
import Support from '../screens/Support';
import Settings from "../screens/Settings";
 
const Drawer = createDrawerNavigator();
 
const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={TabNavigator} />
      <Drawer.Screen name="Support" component={Support} />
      <Drawer.Screen name="Settings" component={Settings} />
    </Drawer.Navigator>
 
    /*
    ,
  {
    drawerPosition: "right",
    drawerWidth: 100
  }
  */
  );
}
 
export default DrawerNavigator;

Est-il possible de désactiver certains champs titres ?
Sinon quelqu'un sait-il comment mettre le drawernavigator à droite (au lieu d'à gauche) ?