如何基于CRNA（Create React Native App）实现Facebook/Twitter图文分享

Hey there! Let's break down how to share images and text to Facebook and Twitter using CRNA (Create React Native App). Since CRNA doesn’t come with built-in social sharing tools out of the box, we’ll use trusted third-party solutions and cover both Expo-managed (the default CRNA setup) and bare React Native workflows in case you decide to eject later.

First up, make sure your CRNA project is up-to-date. If you’re using the Expo-managed setup (standard for CRNA), run expo upgrade to ensure you have the latest Expo packages. If you’ve ejected to bare React Native, double-check your React Native version is compatible with the libraries we’ll use.

Expo provides built-in and easy-to-use APIs for sharing. We’ll cover both general system sharing (which lets users pick Facebook/Twitter) and direct app-to-app sharing.

通用系统分享（支持所有社交平台） #

This method brings up the device’s native share menu, letting users select Facebook, Twitter, or any other installed app. It works for both text and images.

First, import the Share module from Expo (no extra installation needed):

import { Share } from 'expo';

Then create a function to handle sharing:

const shareContent = async () => {
  try {
    const shareResult = await Share.share({
      message: 'Check out this awesome content I found!', // Your text content
      url: 'https://example.com/your-image.jpg', // Remote image URL OR local file URI
    });

    if (shareResult.action === Share.sharedAction) {
      if (shareResult.activityType) {
        console.log(`Successfully shared to ${shareResult.activityType}`);
      } else {
        console.log('Content shared successfully!');
      }
    } else if (shareResult.action === Share.dismissedAction) {
      console.log('User cancelled the share');
    }
  } catch (error) {
    alert(`Share failed: ${error.message}`);
  }
};

直接分享到Facebook #

To skip the system menu and share directly to the Facebook app, use the expo-facebook library:

1. Install the package:

expo install expo-facebook

2. Add your Facebook App ID to app.json (you’ll need to register an app on Facebook’s Developer Portal first):

{
  "expo": {
    "facebookScheme": "fbYOUR_APP_ID",
    "facebookAppId": "YOUR_APP_ID",
    "facebookDisplayName": "Your App Name"
  }
}

3. Create the share function:

import * as Facebook from 'expo-facebook';

const shareToFacebook = async () => {
  try {
    // Initialize Facebook SDK
    await Facebook.initializeAsync({
      appId: 'YOUR_APP_ID',
    });

    const shareResult = await Facebook.shareAsync({
      message: 'Check out this cool image!',
      url: 'https://example.com/your-image.jpg', // Image URL or local URI
    });

    if (shareResult.isCancelled) {
      console.log('Facebook share cancelled');
    } else {
      console.log('Shared to Facebook successfully!');
    }
  } catch (error) {
    console.error('Facebook share error:', error);
  }
};

直接分享到Twitter #

Expo doesn’t have a dedicated Twitter library, but we can use deep linking to open the Twitter app (or web version if the app isn’t installed):

import { Linking } from 'react-native';

const shareToTwitter = async () => {
  // Encode text and image URL to avoid issues with special characters
  const encodedText = encodeURIComponent('Check out this content!');
  const encodedImageUrl = encodeURIComponent('https://example.com/your-image.jpg');

  // Deep link to Twitter app
  const twitterAppUrl = `twitter://post?text=${encodedText}&url=${encodedImageUrl}`;
  // Fallback to web intent
  const twitterWebUrl = `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedImageUrl}`;

  try {
    const isAppAvailable = await Linking.canOpenURL(twitterAppUrl);
    if (isAppAvailable) {
      await Linking.openURL(twitterAppUrl);
    } else {
      await Linking.openURL(twitterWebUrl);
    }
  } catch (error) {
    console.error('Twitter share error:', error);
  }
};

If you’ve ejected your CRNA project to bare React Native, the react-native-share library is a robust option that supports direct sharing to specific platforms.

1. Install the library:

npm install react-native-share --save

(For React Native 0.60+, auto-linking handles native setup. For older versions, run react-native link react-native-share)

2. Configure platform permissions:

• iOS: Add these lines to Info.plist to access photos (if sharing local images):

<key>NSPhotoLibraryUsageDescription</key>
<string>Need access to photos to share images</string>

• Android: Add these permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

3. Create share functions for Facebook and Twitter:

import Share from 'react-native-share';

// Share to Facebook
const shareToFacebook = async () => {
  const shareOptions = {
    message: 'Check out this image!',
    url: 'file:///path/to/your/local/image.jpg', // Local image path OR remote URL
    social: Share.Social.FACEBOOK,
  };

  try {
    const result = await Share.open(shareOptions);
    console.log('Facebook share result:', result);
  } catch (error) {
    console.error('Facebook share failed:', error);
  }
};

// Share to Twitter
const shareToTwitter = async () => {
  const shareOptions = {
    message: 'Check out this cool content!',
    url: 'https://example.com/your-image.jpg',
    social: Share.Social.TWITTER,
  };

  try {
    const result = await Share.open(shareOptions);
    console.log('Twitter share result:', result);
  } catch (error) {
    console.error('Twitter share failed:', error);
  }
};

• Image URIs: For local images, make sure the path is correct (e.g., file:///storage/emulated/0/Download/image.jpg on Android or file:///var/mobile/Containers/Data/Application/.../image.jpg on iOS). For remote images, ensure the URL is publicly accessible.
• Platform Permissions: Always request necessary permissions (like photo access) before sharing local images to avoid crashes.
• App Registration: For direct Facebook sharing, you must register your app on Facebook’s Developer Portal and configure the correct IDs in your project.

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