React Native 第三方分享

rn嵌入第三方分享.目前各大第三方平台还不支持rn集成(登入,支付,分享)所以我们必须要用迂回战术这一部分我们用原生集成然后rn传值调用原生.
代码
准备阶段
原生接入第三方分享这一部分略是个体力活
无非就是添加权限,添加白名单,申请key和导入sdk等
假设你原生第三方分享已经集成完毕了那么接下来我们就用rn传值过来并且调用

#import "FirstViewController.h"
//rn于ios传值用
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTBridgeModule.h>
//极光分享
#import "JSHAREService.h"
//极光分享自定义组件
#import "ShareView.h"
#import "AppDelegate.h"
@interface FirstViewController ()<RCTBridgeModule>

@property (nonatomic, strong) ShareView *shareView;

@property(nonatomic,copy) NSString *ShareImageUrl;
@end

@implementation FirstViewController

- (void)viewDidLoad {
    [super viewDidLoad];
  self.title = @"RN第三方分享";

  [self initRN];

}
-(void)initRN{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"RNThreeApp"
                                               initialProperties:nil
                                                   launchOptions:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.view = rootView;

}

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(doShare:(NSString*)imageUrl callback:(RCTResponseSenderBlock)callback){
  NSLog(@"rn传过来的参数为%@",imageUrl);
  self.ShareImageUrl = imageUrl;
  if (imageUrl.length>0) {
    NSLog(@"%@",imageUrl);
    dispatch_async(dispatch_get_main_queue(), ^{
      [self.shareView showWithContentType:1];
    });
    NSString *OsStr = @"分享成功了";
    callback(@[[NSNull null],OsStr]);
  }

}





//懒加载
- (ShareView *)shareView {
  if (!_shareView) {
    _shareView = [ShareView getFactoryShareViewWithCallBack:^(JSHAREPlatform platform, JSHAREMediaType type) {
      [self shareLinkWithPlatform:platform];
    }];
     AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];

    [app.window.rootViewController.view addSubview:self.shareView];
  }
  return _shareView;
}


- (void)shareLinkWithPlatform:(JSHAREPlatform)platform {
  JSHAREMessage *message = [JSHAREMessage message];

  NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:self.ShareImageUrl]];

  message.mediaType = JSHAREImage;
  message.platform = platform;
  message.image = imageData;

  [JSHAREService share:message handler:^(JSHAREState state, NSError *error) {

    NSLog(@"分享回调");

  }];
}

rn代码

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';
//ios原生传值用
var NativeTest =  require('react-native').NativeModules.FirstViewController;
// const instructions = Platform.select({
//   ios: 'Press Cmd+R to reload,\n' +
//     'Cmd+D or shake for dev menu',
//   android: 'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Button onPress={this.onPressShar}
        title="分享"
        />
      </View>
    );
  }

  onPressShar(){
//点击分享将值传给原生并且原生拉起第三放分享//分享一个图片,链接,标题
核心代码
NativeTest.doShare('http://bmob-cdn-15476.b0.upaiyun.com/2018/01/19/b45a865bee3343e7a2279b056addf4c5.png',(error,events)=>{
  if(error) {
   // console.error(error);
  }else{

   // alert(events);
  }
});
  }



}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});