分享
三行代码  ›  专栏  ›  技术社区  ›  aditya kumar

在React Native中的HeaderRight上添加多个按钮 - Adding more than one buttons on headerRight in react-native

  •  0
  • aditya kumar  · 技术社区  · 1 周前

    我是新来的反应本地人。在这里,我试图在headerright上添加两个按钮。我确实添加了一个按钮,但我不知道如何放置多个按钮。像这样的东西。 two button icon

    我正在使用 react-navigaiton react-navigation-header-buttons .

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

    主屏幕

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

    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;
    
    1 回复  |  直到 1 周前
        1
  •  1
  •   JP Ramassini    1 周前

    你在正确的轨道上。你应该可以简单地添加另一个 Item 无论您希望在 HeaderButtons 组件如下:

    <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 A中的元素 View .

    看起来你在用 react-navigation-header-buttons 包,下面是它们的示例,其中有多个标题图标供您参考: https://github.com/vonovak/react-navigation-header-buttons/blob/master/example/screens/UsageCustom.tsx