React-navigation 5 - Drawer Navigator：更改抽屉菜单图标的样式

Question

我正在使用 React-navigation 5 的 Drawer Navigator。我需要将菜单（抽屉的默认）图标颜色更改为白色。

我找不到任何道具，或者可能是我错过了。有人可以帮忙吗？

Answer 1

这就是我的处理方式。

const NavigationDrawerStructure = (props) => {
    const toggleDrawer = () => {
        props.navigationProps.toggleDrawer();
    };

    return (
        <TouchableOpacity onPress={() => toggleDrawer()}>
            <HamburgerIcon />
        </TouchableOpacity>
    );
};

function firstScreenStack({ navigation }) {
    return (
        <Stack.Navigator initialRouteName="FirstPage">
            <Stack.Screen
                name="FirstPage"
                component={FirstPage}
                options={{
                    title: 'First Page', //Set Header Title
                    headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
                    headerStyle: {
                        backgroundColor: '#f4511e', //Set Header color
                    },
                    headerTintColor: '#fff', //Set Header text color
                    headerTitleStyle: {
                        fontWeight: 'bold', //Set Header text style
                    },
                }}
            />
        </Stack.Navigator>
    );
}

Answer 2

这对我有用（使用 "@react-navigation/drawer": "^6.1.4"）：

  <Drawer.Navigator
    screenOptions={{headerTintColor: '#FFFFFF'}}
  >

React-navigation 5 - Drawer Navigator：更改抽屉菜单图标的样式

React-navigation 5 - Drawer Navigator: Change style of Drawer's menu icon

react-native

react-navigation-drawer