在 react native 中构建自定义抽屉时，如何在抽屉项目上使用按钮/图标？

Posted 2023-02-16

【中文标题】在 react native 中构建自定义抽屉时，如何在抽屉项目上使用按钮/图标？

【英文标题】：How do I use buttons/icons on drawer items when building my custom drawer in react native?

【发布时间】：2021-12-31 15:34:29

【问题描述】：

我正在尝试在我的 react 本机导航抽屉中创建一个自定义抽屉，我试图在其中放置图标和按钮而不是抽屉屏幕组件。我的一些代码放在这里供参考：

function CustomDrawerContent(props: DrawerContentComponentProps) 
   <DrawerContentScrollView ...props >          
            <DrawerItemList ...props />
            <DrawerItem
                label="Facebook"
                onPress=() => Linking.openURL('https://www.facebook.com/mysite/')
                inactiveTintColor="black"  
            />
            <DrawerItem
                label="Instagram Page"
                onPress=() => Linking.openURL('https://www.instagram.com/mysite/')
                inactiveTintColor="black"
            />
        </DrawerContentScrollView>

我正在尝试将这些抽屉项目作为我网站的 Facebook 和 Instagram 页面的按钮/图标，用户将被定向到这些页面。我可以知道如何实现这一目标吗？

【参考方案1】：

您可以将icon 和style 添加到您的DrawerItem。

<DrawerItem
  label="Instagram Page"
  icon=( focused, color, size ) => 
    return <Icon color=color size=size />;
  
  style= borderRadius: 50 
  onPress=() => Linking.openURL("https://www.instagram.com/mysite/")
  inactiveTintColor="black"
/>

icon 道具返回一个 React 元素，您可以查看更多关于道具和其他细节here

【讨论】：

对您的问题有帮助或回答吗？ @nasif92

是的，确实如此。我尝试在抽屉项目中使用 icon 属性来玩一下。我现在稍微改变了我的实现以使用图​​标内的图像组件。