如何在 React Native 共享中应用动态数据

Question

For my recipe app, I want to enable users to share recipes with their friends. For this, I'm using the official React Native share function. I'm trying to pass props to the message and title, without any success. Here's the code I'm using for sharing.

 onShare = async () => {
// const result = await
const { caption } = this.props.section;
Share.share(
  {
    message: caption,
    title: "{section.caption}"
  },
  {
    excludedActivityTypes: [
      // 'com.apple.UIKit.activity.PostToWeibo',
      // 'com.apple.UIKit.activity.Print',
      // 'com.apple.UIKit.activity.CopyToPasteboard',
      // 'com.apple.UIKit.activity.AssignToContact',
      // 'com.apple.UIKit.activity.SaveToCameraRoll',
      // 'com.apple.UIKit.activity.AddToReadingList',
      // 'com.apple.UIKit.activity.PostToFlickr',
      // 'com.apple.UIKit.activity.PostToVimeo',
      // 'com.apple.UIKit.activity.PostToTencentWeibo',
      "com.apple.UIKit.activity.AirDrop"
      // 'com.apple.UIKit.activity.OpenInIBooks',
      // 'com.apple.UIKit.activity.MarkupAsPDF',
      // 'com.apple.reminders.RemindersEditorExtension',
      // 'com.apple.mobilenotes.SharingExtension',
      // 'com.apple.mobileslideshow.StreamShareService',
      // 'com.linkedin.LinkedIn.ShareExtension',
      // 'pinterest.ShareExtension',
      // 'com.google.GooglePlus.ShareExtension',
      // 'com.tumblr.tumblr.Share-With-Tumblr',
      // 'net.whatsapp.WhatsApp.ShareExtension', //WhatsApp
    ]
  }
);

};

The way data is loaded into this page is via {section.XXX}. Example:

 <Caption style={styles.Caption}>{section.caption}</Caption>

This is how I trigger the 'onShare' func.

<Button title="Share recipe" onPress={this.onShare} />

I hope someone can help me with this challenge. Thanks in advance!!

Answer 1

I see two problems with your code, the first one is string interpolation which is unnecessary and wrongly executed and the second is that you're referencing an inexistant prop. You're saying in a comment that this.props.section is undefined, that's because the data seems to be passed via the special children prop.

onShare = () => {
    const { children } = this.props;

    if (typeof children !== "string") {
        return;
    }

    Share.share({
        message: children,
        title: children
    });
}