在 React Native 中构建自定义抽屉时，如何在抽屉项目上使用 buttons/icons？

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 页面的 buttons/icons，用户将被定向到这些页面。我可以知道如何实现吗？

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 prop return 一个 React Element，你可以看到更多关于 prop 和其他细节 here

在 React Native 中构建自定义抽屉时，如何在抽屉项目上使用 buttons/icons？

How do I use buttons/icons on drawer items when building my custom drawer in react native?

react-native

navigation-drawer

react-native-navigation