React-navigation 5-抽屉导航器:更改抽屉菜单图标的样式

时间:2020-09-21 15:10:07

标签: react-native react-navigation-drawer

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

我找不到任何道具,或者我错过了。 有人可以帮忙吗?

enter image description here

1 个答案:

答案 0 :(得分: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>
    );
}