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

Question

我正在尝试在我的 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 页面的按钮/图标，用户将被定向到这些页面。我可以知道如何实现这一目标吗？

Answer 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