React-navigation默认的抽屉图标,怎么改?
React-navigation default drawer icon, how to change it?
如何更改下图中的图标点?我一直无法在文档中找到文档,我想将其更改为不同的图标,但我不知道该怎么做。
我找到了关于 drawerIcon 的文档,但据我所知并设法实现该图标是针对抽屉中的菜单项的,它本身不适用于屏幕 header。
这是我的代码:
const Drawer = createDrawerNavigator();
const headerOptions = {
title: 'Task List',
drawerIcon: ({ focused, size, color }) => <Ionicons name="ios-pizza" color="red" size={24} />,
};
const HomeScreen = ({ navigation }, props) => {
return (
<Drawer.Navigator screenOptions={{ drawerType: 'front' }}>
<Drawer.Screen name="TaskList" component={TaskListScreen} options={headerOptions} />
<Drawer.Screen name="TaskView" component={TaskViewScreen} />
<Drawer.Screen name="Notifications" component={Notifications} />
<Drawer.Screen name="Login" component={LoginScreen} />
</Drawer.Navigator>
);
};
但如前所述,它会在抽屉项目中呈现图标,如下所示
headerLeft
: Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:
<Drawer.Navigator
screenOptions={({ navigation }) => ({
headerLeft: props => <IconComponent onPress={navigation.toggleDrawer} />,
})}
>
...
</Drawer.Navigator>
如何更改下图中的图标点?我一直无法在文档中找到文档,我想将其更改为不同的图标,但我不知道该怎么做。
我找到了关于 drawerIcon 的文档,但据我所知并设法实现该图标是针对抽屉中的菜单项的,它本身不适用于屏幕 header。
这是我的代码:
const Drawer = createDrawerNavigator();
const headerOptions = {
title: 'Task List',
drawerIcon: ({ focused, size, color }) => <Ionicons name="ios-pizza" color="red" size={24} />,
};
const HomeScreen = ({ navigation }, props) => {
return (
<Drawer.Navigator screenOptions={{ drawerType: 'front' }}>
<Drawer.Screen name="TaskList" component={TaskListScreen} options={headerOptions} />
<Drawer.Screen name="TaskView" component={TaskViewScreen} />
<Drawer.Screen name="Notifications" component={Notifications} />
<Drawer.Screen name="Login" component={LoginScreen} />
</Drawer.Navigator>
);
};
但如前所述,它会在抽屉项目中呈现图标,如下所示
headerLeft
: Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:
<Drawer.Navigator
screenOptions={({ navigation }) => ({
headerLeft: props => <IconComponent onPress={navigation.toggleDrawer} />,
})}
>
...
</Drawer.Navigator>