react-native-fbsdk Facebook 官方组件

2017-10-31 本文已影响990人目标全栈

最近有一个需求，发布海外版本的app，多语言版本已经做好，但还有一个问题，我需要把国内版本的微信分享换成国外版本的Facebook分享，这个本身可以用react-native-share这个组件（附网址：https://github.com/EstebanFuentealba/react-native-share）来完成，如果你只需要分享的话。但这个组件有一个坏处，它重写了linking的发送邮件功能，所以你还需要把发送邮件的方法改一下，改为这个组件自己封装的方法。但我既需要发送邮件功能，而且以后也有可能会需要做三方登陆功能，所以我就选择了react-native-fbsdk。
首先，开始做这个之前请确保几件事情：

有科学上网方法
手机上装有Facebook
电脑装有Android Studio
你的app可能无法兼容Android6.0一下系统
接下来进入正题，首先你要有Facebook的账号，只是分享的话是不需要去注册应用的，如果你需要别的权限就需要注册应用了。
https://developers.facebook.com/products/这个是Facebook的应用注册网址按照要求来就行，由于我的账号在进行人机验证(科学上网的坏处)这里就不再贴流程了，后续会补上，跟微信是一样的。
首先这里是GitHub的地址：https://github.com/facebook/react-native-fbsdk
里面是一些配置方法，但里面的命令跟实际应用的不一样：

运行npm install react-native-fbsdk --save
运行react-native link react-native-fbsdk
上面的两步会自动帮你配置大部分的东西，但如果你想手动配置或者看一下有没有帮你自动配置看这里：
react native版本大于0.29的：
找到你的MainApplication.java和MainActivity.java文件，你可以在android/app/src/main/java/com/<project name>/中找到它们。
首先打开你的MainApplication.java添加这些代码：

import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.appevents.AppEventsLogger;
...

public class MainApplication extends Application implements ReactApplication {

  private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

  protected static CallbackManager getCallbackManager() {
    return mCallbackManager;
  }
    //...

其中：

import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.appevents.AppEventsLogger;

这四行一定要检查link有没有自动添加，如果没用添加一定要加上。
接下来我们继续在这个文件里添加方法：
用以下方法覆盖掉MainApplication.java中的onCreate()方法：

@Override
public void onCreate() {
  super.onCreate();
  FacebookSdk.sdkInitialize(getApplicationContext());
  // If you want to use AppEventsLogger to log events.
  AppEventsLogger.activateApp(this);
}

添加方法以及注册SDK包：

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new FBSDKPackage(mCallbackManager)
      );
    }
};

请切记：

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

这个方法是没有的需要你自己添加，这个是我的文件截图，请对比各自的位置：

image.png

之后：

image.png

方框内的东西都要添加的，而且link添加这句话的时候是没带参数的，一定要改：

image.png

之后打开MainActivity.java文件，覆盖onActivityResult()方法：

import android.content.Intent;

public class MainActivity extends ReactActivity {

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }
    //...

附上这个文件截图：

image.png

这些做完之后，接下来是你去Facebook注册应用之后用到的需要填写你申请的id了。请注意，如果只是分享你是用不到这些的，但如果你需要登陆、分享视频和照片，那就需要下面的配置了：
向项目的字符串文件添加的 Facebook 应用编号，并更新 Android 清单：

打开 strings.xml 文件。示例路径：/app/src/main/res/values/strings.xml。
添加新的字符串（名称为 facebook_app_id，值为 Facebook 应用编号）。
打开 AndroidManifest.xml。
将 uses-permission 元素添加到清单：

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

5.将 meta-data 元素添加到 application 元素内：

<application android:label="@string/app_name" ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    ...
</application>

如果要通过 Android 版 Facebook 应用分享链接、图片或视频，还需要在清单文件中声明 FacebookContentProvider。

在 authorities 值的末尾添加您的应用编号。例如，如果 Facebook 应用编号是 1234，则声明应如下图所示：

<provider android:authorities="com.facebook.app.FacebookContentProvider1234"
          android:name="com.facebook.FacebookContentProvider"
          android:exported="true" />

provider要写在application标签内
之后在Android Studio中刷新：

image.png

结果还是报错了：

没关系，找找原因，这里告诉我的是我的样式不被支持，但我没动过这个文件，那就是版本不支持？我打开react-native-fbsdk中的build.gradle文件：

image.png
发现这里支持的最低版本的buildToolsVersion为25.0.3,还有compileSdkVersion版本为25，也就是我的环境里这些工具版本太低了，我们去改一下:

image.png

改为这样再次刷新项目就可以了：

image.png

但这样也会导致一个问题，你的app可能不支持Android6.0以下的版本了。
这边配置完成之后记得在模拟器或者真机上重新运行一下react-native run-android
现在就可以开始调用方法了，首先只是单独分享一个链接的方法：

const FBSDK = require('react-native-fbsdk');
const {
  ShareDialog,
} = FBSDK;

// ...

// Build up a shareable link.
const shareLinkContent = {
  contentType: 'link',
  contentUrl: "https://facebook.com",
  contentDescription: 'Wow, check out this great site!',
};

// ...

// Share the link using the share dialog.
shareLinkWithShareDialog() {
  var tmp = this;
  ShareDialog.canShow(this.state.shareLinkContent).then(
    function(canShow) {
      if (canShow) {
        return ShareDialog.show(tmp.state.shareLinkContent);
      }
    }
  ).then(
    function(result) {
      if (result.isCancelled) {
        alert('Share cancelled');
      } else {
        alert('Share success with postId: '
          + result.postId);
      }
    },
    function(error) {
      alert('Share fail with error: ' + error);
    }
  );
}

运行结果：

image.png
之后的各种登陆和支付的方法就不贴了，都在里的文档：
https://github.com/facebook/react-native-fbsdk
只要环境成功了，就没什么问题了。
安卓篇就先写到这里，ios篇后续会补上。

react-native-fbsdk Facebook 官方组件

猜你喜欢

热点阅读