神刀安全网

Implement Social Media Sharing In A NativeScript App

Every app lately has some social media aspect to it.  Most commonly, apps will allow you to share some kind of data, whether it be an image or text, to social media networks such as Facebook or Twitter.  Sharing via email or SMS message still is classified as social sharing.  When building NativeScript Android and iOS applications, sharing data isn’t complicated.

We’re going to see how to share image data and text data on social media networks via a Telerik NativeScript Android and iOS mobile application.

Let’s start by creating a fresh NativeScript project.  This can be done by executing the following from the Command Prompt (Windows) or Terminal (Mac and Linux):

Create New NativeScript Project

Shell

tnscreateSocialProject cd SocialProject tnsplatformaddios tnsplatformaddandroid 

It is important to note that if you’re not using a Mac, you cannot add and build for the iOS platform.

With NativeScript we can easily interface directly with the native iOS and Android APIs, but for convenience we’re going to use a plugin instead.  We’re going to use the social sharing plugin .

From the Terminal or Command Prompt, execute the following to add it:

Add Social Media Sharing Plugin For NativeScript

Shell

tnspluginaddnativescript-social-share 

Now we can start the development process.

We’re going to spend all our time in the app/main-page.js and  app/main-page.xml files.  One of course being our UI file and the other being our logic file.

We’re going to start by adding a few functions to our app/main-page.js file.  Open it and add the following:

app/main-page.js

JavaScript

var socialShareModule = require("nativescript-social-share"); var imageSourceModule = require("image-source");   exports.pageLoaded = function(args) {     var page = args.object;     page.bindingContext = {}; }   exports.shareText = function() {     socialShareModule.shareText("I love NativeScript!", "How would you like to share this text?"); }   exports.shareImage = function() {     imageSourceModule.fromUrl("https://www.nraboy.com/images/nraboy.png").then(function(image) {         socialShareModule.shareImage(image);     }); } 

At the top you’ll notice we are importing the plugin module and the module that will let us load image data.  Then we create both a shareText and a  shareImage function.

Per the plugin documentation , the sharing module’s  shareText function expects a message and an optional subject.  The module’s  shareImage function expects an image and an optional subject.  We’re loading the image data from a remote URL, but the  image-source module has many other methods for loading data as seen in the official documentation .

Now let’s look at the app/main-page.xml file.  Open it and include the following code:

app/main-page.xml

XHTML

<Pagexmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">     <StackLayout>         <Buttontext="Share Text" tap="shareText"/>         <Buttontext="Share Image" tap="shareImage"/>     </StackLayout> </Page> 

We only have two buttons here.  One will allow us to share text when clicked and the other will allow us to share the remote image when clicked.  Nothing fancy at all here.

When you build your project you’ll be able to do social sharing on iOS and Android.  Something to note though is that both platforms have different sharing options and more options become available when you have more apps installed.

Conclusion

You just saw how to share text and images through various social outlets.  Yes I admit that I took most of this source code from the official documentation , but I made some revisions to make it easier to understand.

Different social media options will become available on each of the platforms as more apps get installed on the users device.  The simulator by default will have very limited sharing options.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Implement Social Media Sharing In A NativeScript App

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮