How to add a second header icon using headerRIght and Icon.Button

问题

I am trying to add a search icon next to the menu icon on my header on the right side. I have tried repeating Icon.Button but there is no change. Using React Navigation, React Native Paper, and react-native-vector-icons/Iconicons.

    <HomeStack.Navigator
    screenOptions={{
        headerStyle: {
            backgroundColor: '#155888'
        },
        headerTintColor: '#fff',
        headerTitleAlign: 'center',
        headerRight: () => (
            <Icon.Button 
                name='ios-menu'
                size={30}
                backgroundColor='#155888'
                style={{ flexDirection:"row", paddingRight: 15 }}
                onPress={() => { navigation.toggleDrawer() }}
            />
        )
    }}
>

回答1:

I think custom-header will solve your problem.

I have also faced that issue, what I did I just added to custom-header each screen ( by using helper method )

export const createAppHeader = (props, callback, data) => {

props.navigation.setOptions({
    headerRight: () => (
        <AppHeader
            onClick={callback}
            pageData={data}
        />
    ),
    headerLeft: null,
    headerStyle: {
        shadowOpacity: 0,
        shadowOffset: {
            height: 0,
        },
        elevation: 0,
        shadowRadius: 0,
    },
});}

here AppHeader is custom header which is React component.

来源：https://stackoverflow.com/questions/63363821/how-to-add-a-second-header-icon-using-headerright-and-icon-button