实现react-native-fbsdkshare

时间:2015-11-07 19:28:43

标签: ios facebook react-native

我已按照https://github.com/facebook/react-native-fbsdk上编写的指南来安装和使用react-native-fbsdk模块。但是,当我点击"分享"按钮会引发以下错误:

shareOnFacebook() {

      var linkContent = new FBSDKShareLinkContent('https://facebook.com', 'Wow, check out this great site!', 'Facebook.com', null);
// Share the link using the native share dialog.
FBSDKShareDialog.show(linkContent, (error, result) => {
  if (!error) {
    if (result.isCancelled) {
      alert('Share cancelled.');
    } else {
      alert('Thanks for sharing!');
    }
  } else {
    alert('Error sharing.');
  }
});

<TouchableHighlight style={[itemStyles.itemButtonShare,itemStyles.itemButtonShareFacebook]} onPress={() => this.shareOnFacebook(item)}><Text>Share On Facebook</Text></TouchableHighlight>

运行应用程序时还会出现3个警告:

&#39;警告:&#34; RCTFBSDKShareButton&#34;的本机组件不存在&#39; &#39;警告:&#34; RCTFBSDKSendButton&#34;的本机组件不存在&#39; &#39;警告:&#34; RCTFBSDKLikeControl&#34;的本机组件不存在&#39;

这是我使用的代码:

var FBSDKShare = require(&#39; react-native-fbsdkshare&#39;);

var {   FBSDKShareDialog,   FBSDKShareDialogInterface,   FBSDKShareLinkContent,   FBSDKShareShareButton } = FBSDKShare;

    #import "RCTBridgeModule.h"

@interface FacebookShareManager : NSObject <RCTBridgeModule>
@end

(我已经安装了FBSDKCoreKit.framework,FBSDKLoginKit.framework和FBSDKShareKit.framework并设置了框架搜索路径。) 有人可以帮忙解决这个错误吗? 感谢

----- EDITED -------

好吧最后我决定创建一个本机方法并从反应方面调用它。如果有人遇到这个问题,这是替代解决方案:

创建2个文件,personalManager.h和personalManager.m:

whyManager.h的内容应为:

    #import "FacebookShareManager.h"
#import "FBSDKCoreKit/FBSDKCoreKit.h"
#import "FBSDKShareKit/FBSDKShareKit.h"

@implementation FacebookShareManager

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(showDialog: (NSDictionary *)params callback:(RCTResponseSenderBlock)callback ) {


  dispatch_async(dispatch_get_main_queue(), ^{

    FBSDKShareLinkContent *content = [[FBSDKShareLinkContent alloc] init];

    NSURL    *    shareUrl      = [NSURL URLWithString:params[@"contentUrl"]];
    NSURL    *    shareImageUrl = [NSURL URLWithString:params[@"contentImageUrl"]];
    NSString * shareTitle       = [NSString stringWithString:params[@"contentTitle"]];
    NSString * shareDescription = [NSString stringWithString:params[@"contentDescription"]];

    content.contentURL         = shareUrl;
    content.imageURL           = shareImageUrl;
    content.contentTitle       = shareTitle;
    content.contentDescription = shareDescription;

    [FBSDKShareDialog showFromViewController:nil
                                 withContent:content
                                    delegate:nil];

  });

};

@end

和beyondManager.m的内容:

var FacebookShareManager = require('NativeModules').FacebookShareManager;

现在我们需要从react-native组件中调用此方法:

首先在您的react-native组件类文件的顶部包含manager:

    shareOnFacebook(item) {


      var params = {"contentUrl": item.url,"contentImageUrl": item.pictureUrl,"contentTitle": item.title,"contentDescription":item.description};
      FacebookShareManager.showDialog(params, (info)=> {


        // do something you need...


    });

  }

现在在组件类中添加此方法:

 *= communities.css
 *= users.css
 *= require_tree .
 *= require_self
*/

@import 'comments';

1 个答案:

答案 0 :(得分:1)

我有完全相同的问题,事实证明我有facebook sdk v4.7.1。 所以

  1. 我删除了之前的内容并下载了最新的v4.8.0。
  2. 然后我再次关注从安装JavaScript packages
  3. 开始的所有步骤
  4. 然后手动添加files to xcode
  5. 我在github上使用了示例中的共享对话框,现在一切正常。