我正在尝试向我的反应导航抽屉中的每个屏幕添加一个图标,但是该图标没有出现。
这是我的代码:
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>
);
}
在文档添加图标中仅在DrawerItem中提及:
在屏幕的drawerIcon
中传递options
:
options={{
title: 'Product',
drawerIcon: ({ focused, size }) => (
<Image
source={require('./images/icons/plumbing-b.png')}
style={[focused ? styles.drawerActive : styles.drawerInActive, { height: size, width: size }]}
/>
}}
https://reactnavigation.org/docs/en/drawer-navigator.html#drawericon
i使用抽屉内容配置抽屉内容:步骤如下...1.用屏幕创建一个抽屉函数DrawerStack({route,navigation}){返回(
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。使用抽屉内容自定义抽屉内容:
function DrawerStack({route,navigation}){返回(
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>
)}