J'essaye d'ajouter une icône à chacun des écrans dans mon tiroir de navigation de réaction mais l'icône n'apparaît pas.
voici mon code:
function Drawer() {
return (
<Drawer.Navigator
drawerStyle={styles.drawer}
initialRouteName="Home"
drawerPosition='right'
drawerContentOptions={{
activeTintColor: 'white',
inactiveTintColor: 'white',
itemStyle: { alignItems:'flex-end' },
}}>
<Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
<Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
</Drawer.Navigator>
);
}
export function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
options={{
headerTitleAlign:"center",
headerRight: ({}) => <HeaderRight />,
headerLeft: ({}) => <Search />
}}
component={Drawer}
name="Drawer"
/>
<Stack.Screen name="Product" component={Product} options={{title:"product"}} />
{/*
* Rest Screens
*/}
</Stack.Navigator>
</NavigationContainer>
);
}
dans la documentation, l'ajout d'icône n'est mentionné que dans DrawerItem:
je configure le contenu du tiroir en utilisant le contenu du tiroir: les étapes sont les suivantes ... 1.Créez un tiroir avec la fonction d'écrans DrawerStack ({route, navigation}) {return (
drawerContent={(props) => <DrawerContent {...props} />}
drawerStyle={{
backgroundColor: "green",
alignItems: "center",
paddingTop: 100
}}
>
{/* //it is must to define the screens here */}
<Drawer.Screen name="Drawer1" component={Drawer1}
/>
<Drawer.Screen name="Drawer2" component={Drawer2} />
</Drawer.Navigator>
)}
2. personnalisez le contenu du tiroir à l'aide de tiroirContenu:
function DrawerStack ({route, navigation}) {return (
drawerContent={(props) => <DrawerContent {...props} />}
drawerStyle={{
backgroundColor: "green",
alignItems: "center",
paddingTop: 100
}}
>
{/* //it is must to define the screens here */}
<Drawer.Screen name="Drawer1" component={Drawer1}
/>
<Drawer.Screen name="Drawer2" component={Drawer2} />
</Drawer.Navigator>
)}