如何在React Native中访问iOS/Android原生分享图标？

Hey there! Great question—using system-native share icons without adding extra packages or icon files is totally feasible, and it keeps your app nice and lean. Let’s break this down for iOS and Android separately:

Starting with React Native 0.68+, the Image component has built-in support for SF Symbols—Apple’s native icon library. The share icon you’re looking for is named square.and.arrow.up, and you can use it directly like this:

import { Image } from 'react-native';

// iOS native share icon (SF Symbols)
<Image
  systemName="square.and.arrow.up"
  size={24} // Adjust size as needed
  color="#000" // Set your desired color
/>

This pulls directly from iOS’s system icons, so it’ll match the style of the user’s device (light/dark mode, iOS version updates) automatically—no extra files or dependencies required.

Android comes with a built-in share icon in its system drawables, typically named ic_menu_share. You can reference this directly in React Native using the Image component’s source prop with the system resource URI:

import { Image, Platform } from 'react-native';

// Cross-platform native share icon component
const NativeShareIcon = () => {
  if (Platform.OS === 'ios') {
    return (
      <Image
        systemName="square.and.arrow.up"
        size={24}
        color="#000"
      />
    );
  } else {
    return (
      <Image
        source={{ uri: 'android.resource://android/drawable/ic_menu_share' }}
        style={{
          width: 24,
          height: 24,
          tintColor: '#000' // Adjust color here
        }}
      />
    );
  }
};

// Use the component wherever you need a share icon
<NativeShareIcon />

A quick note: The exact icon name might vary slightly across Android versions or custom ROMs, but ic_menu_share is the standard one that works on most devices. The tintColor prop lets you match the icon to your app’s theme, just like iOS’s color prop.

If you need to handle different states (like pressed/highlighted), you could extend this component with platform-specific state handling, but the above code covers the basic, dependency-free use case.

Hope this gets you set up with native share icons in no time!

内容的提问来源于stack exchange，提问作者tommy chheng