javascript - 在react-native中在headerRight上添加多个按钮

Question

我是 react 原生新手。在这里，我尝试在 headerRight 上添加两个按钮。我确实添加了一个按钮，但我不知道如何添加多个按钮。像这样的东西。

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

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

mainScreen

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 元素，这就是本示例所使用的。例如，您可以在 View 内嵌套多个 Text 元素。

看起来您正在使用 react-navigation-header-buttons 包，这里是他们的示例，其中包含多个标题图标供您引用:https://github.com/vonovak/react-navigation-header-buttons/blob/master/example/screens/UsageCustom.tsx