最近有一个需求，发布海外版本的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篇后续会补上。
网友评论