在header上添加多个按钮

Question

我是本机反应的新手。在这里，我试图在headerRight上添加两个按钮。我确实添加了一个按钮，但我不知道如何放置多个按钮。这样的事情。

我正在使用react-navigaiton和react-navigation-header-buttons。

这就是我添加一个按钮的方式。

主屏幕

headerRight: (
            <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
                <Item
                    title={"Search"}
                    iconName={"md-search"}
                    onPress={() => {
                        console.log('Search')
                    }}
                />
            </HeaderButtons>
        ),

CustomHeaderButton.js

import {HeaderButton, Item} from 'react-navigation-header-buttons';
import {Ionicons} from '@expo/vector-icons';
const CustomHeaderButton = props => {
    return(
        <HeaderButton
            {...props}
            IconComponent={Ionicons}
            iconSize={23}
            color={'black'}
        />
    )
};
export default CustomHeaderButton;

Answer 1

您走在正确的轨道上。您应该能够简单地添加另一个Item带有您想要包装在HeaderButtons组件中的标题，图标和onPress功能的控件，如下所示：

<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
                <Item
                    title={"Search"}
                    iconName={"md-search"}
                    onPress={() => {
                        console.log('Search')
                    }}
                />
                <Item
                    title={"Other Button"}
                    iconName={"other-icon-name"}
                    onPress={() => {
                        console.log('The other header icon was pressed.')
                    }}
                />
            </HeaderButtons>

您可以在一个React元素中嵌套多个React元素，这就是本示例所使用的。例如，您可以Text在内嵌套多个元素View。

似乎您正在使用该react-navigation-header-buttons软件包，这也是带有多个标题图标的示例，供您参考：https : //github.com/vonovak/react-navigation-header-buttons/blob/master/example/screens/UsageCustom .tsx